3,4模块绘制

src/store/groupEvolution/index.js

@@ -684,6 +684,65 @@ export const useGroupStructureStore = defineStore("groupStructure", {
 
 export const useGroupMemberStore = defineStore("groupMember", {
   state: () => ({
+    groupList: [
+      {
+        id: 1, 
+        type: "群体一",
+        focusedTopic: "#中国海警首次登检菲律宾#",
+        series: [
+          {
+            type: "radar",
+            data: [
+              {
+                value: [10, 5, 15, 5],
+                symbol: 'circle',
+                symbolSize: 5,
+                itemStyle: {
+                  color: '#01D7DA', // 圆点颜色
+                },
+                areaStyle: {
+                  color: 'rgba(87, 196, 255, 0.3)' // 区域填充
+                },
+                // 点之间的连线
+                lineStyle: {
+                  color: '#0374FE',
+                  type: 'dashed',
+                  width: 1
+                }                
+              }
+            ]
+          }
+        ]
+      },
+      {
+        id: 2, 
+        type: "群体二",
+        focusedTopic: "#中国海警首次登检菲律宾#",
+        series: [
+          {
+            type: "radar",
+            data: [
+              {
+                value: [10, 20, 15, 5],
+                symbol: 'circle',
+                symbolSize: 5,
+                itemStyle: {
+                  color: '#01D7DA', // 圆点颜色
+                },
+                areaStyle: {
+                  color: 'rgba(87, 196, 255, 0.3)' // 区域填充
+                },
+                lineStyle: {
+                  color: '#0374FE',
+                  type: 'dashed',
+                  width: 1
+                } 
+              }
+            ]
+          }
+        ]
+      }
+    ],
     groupMemberList: [
       {
         id: 1,
@@ -706,6 +765,79 @@ export const useGroupMemberStore = defineStore("groupMember", {
         ]
       },
     ],
+    chartData: {
+      xAxisData: ["07:57:46", "09:30:14", "09:57:32", "10:04:47", "10:12:57"],
+      yAxisRange: { min: 0, max: 25, interval: 5},
+      seriesList: [
+        {
+          name: "分裂指数",
+          type: "line",
+          lineStyle: {
+            color: "#2AB8FD",
+            width: 1 // 设置线条宽度为3像素
+          },
+          itemStyle: {
+            color: '#0A1A2F',
+            borderColor: '#2AB8FD',
+            borderWidth: 1
+          },
+          symbol: "circle",
+          symbolSize: 10, // 圆点大小
+          data: [0.9237, 0.14507, 0, 0, 0]
+        },
+        {
+          name: "合并指数",
+          type: "line",
+          lineStyle: {
+            color: "#02D7DA",
+            width: 1 // 设置线条宽度为3像素
+          },
+          itemStyle: {
+            color: '#0A1A2F',
+            borderColor: '#01D7DA',
+            borderWidth: 1
+          },
+          symbol: "circle",
+          symbolSize: 10, // 圆点大小
+          borderWidth: 1, // 边框宽度
+          data: [9.8011, 21.3123, 10.4338, 14.1912, 10.1523]
+        },
+        {
+          name: "收缩指数",
+          type: "line",
+          lineStyle: {
+            color: "#FFDA09",
+            width: 1 // 设置线条宽度为3像素
+          },
+          itemStyle: {
+            color: '#0A1A2F',
+            borderColor: '#FFDA09',
+            borderWidth: 1
+          },
+          symbol: "circle",
+          symbolSize: 10, // 圆点大小
+          borderWidth: 1, // 边框宽度
+          data: [1.9057, 1.5123, 1.0338, 0.5912, 0.1523]
+        },
+        {
+          name: "扩展指数",
+          type: "line",
+          lineStyle: {
+            color: "#EB57B0",
+            width: 1 // 设置线条宽度为3像素
+          },
+          itemStyle: {
+            color: '#0A1A2F',
+            borderColor: '#EB57B0',
+            borderWidth: 1
+          },
+          symbol: "circle",
+          symbolSize: 10, // 圆点大小
+          borderWidth: 1, // 边框宽度
+          data: [15.1119, 6.5123, 10.6338, 9.5912, 4.1523]
+        }
+      ]
+    },
     chartsData: {
       topSelfMedia: [
         {
@@ -1213,7 +1345,72 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
         commentCount: 100,
         // 转发数
         shareCount: 6890
+      },
+      {
+        id: 2,
+        // 评论人
+        commenter: {
+          userId: "1",
+          userName: "Trump-Good",
+          userAvatar: defaultAvatar
+        },
+        // 评论接收人
+        commentRecipient: {
+          userId: "2",
+          userName: "疾风中青劲草",
+          userAvatar: defaultAvatar
+        },
+        // 
+        mutualCommentCount: 3,
+        // 评论内容
+        content: "在我国海域偷运軍械彈藥是應該依法拘捕送交法院睿理判刑，而且在中国的裹服刑的！难道外国人特权？更何况是這千点小国！#中国海警首次登检菲律宾运补船只# #外交部回应中国海警缴获菲士兵枪支#",
+        // 点赞数
+        likeCount: "4.8w",
+        // 评论数
+        commentCount: 100,
+        // 转发数
+        shareCount: 6890
+      }
+    ],
+    chartData: {
+      xAxisData: ["t0", "t1", "t2", "t3", "t4", "t5", "t6"],
+      yAxisRange: { min: 0, max: 5, interval: 1},
+      seriesList: [
+        {
+          name: "社团组一",
+          type: "bar",
+          itemStyle: {
+            color: '#2AB8FD',
+            borderColor: '#2AB8FD',
+            borderWidth: 1,
+            borderRadius: [4, 4, 0, 0]  // 顶部圆角
+          },
+          data: [0, 5, 4, 3, 0, 5, 0]
+        },
+        {
+          name: "社团组二",
+          type: "bar",
+          itemStyle: {
+            color: '#02D7DA',
+            borderColor: '#02D7DA',
+            borderWidth: 1,
+            borderRadius: [4, 4, 0, 0]  // 顶部圆角
+          },
+          data: [3, 0, 1, 0, 3, 5, 0 ]
+        },
+        {
+          name: "社团组三",
+          type: "bar",
+          itemStyle: {
+            color: '#FFDA09',
+            borderColor: '#FFDA09',
+            borderWidth: 1,
+            borderRadius: [4, 4, 0, 0]  // 顶部圆角
+          },
+          data: [5, 0, 4, 0, 3, 0, 0]
         }
       ]
+    },
+
   })
 })

src/views/GroupEvolution/abnormalGroup/components/anomalousContentInfo.vue

@@ -30,8 +30,24 @@
                     </div>
                  </div>
                  <!-- 评论的内容 -->
-                  <div class="content-item-comment">
-                    <!-- <div class="post-content">{{ content.commentContent }}</div> -->
+                 <div class="commit-item">
+                    <div class="commit-content"><div class="commit-content-text">{{ content.content }}</div></div>
+                    <div class="commit-statistic">
+                        <div class="like-item">
+                            <!-- D:\CodeProject\SocialNetworks_duan\src\assets\images\icon\like_icon.png -->
+                            <img src="@/assets/images/icon/like_icon.png" alt="">
+                            <div class="like-count">{{ content.likeCount }}</div>
+                        </div>
+                        <div class="comment-num-item">
+                            <!-- D:\CodeProject\SocialNetworks_duan\src\assets\images\icon\comment_icon.png -->
+                            <img src="@/assets/images/icon/commit_icon.png" alt="">
+                            <div class="comment-count">{{ content.commentCount }}</div>
+                        </div>
+                        <div class="transmit-item">
+                            <img src="@/assets/images/icon/transmit_icon.png" alt="">
+                            <div class="transmit-count">{{ content.shareCount }}</div>
+                        </div>
+                    </div>
                  </div>
             </div>
         </div>
@@ -52,14 +68,14 @@ const props = defineProps({
 .anomalousContent-component {
     width: 100%;
     height: 100%;
-    .title {
-        margin-top: -7px;
-    }
+    .anomalousContent-list {
+        width: 100%;
+        height: 500px;
+        overflow: auto;
         .content-item {
             width: 100%;
-        margin-left: 24px;
+            padding-left: 24px;
             padding-bottom: 20px;
-        border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
             .content-item-title {
             position: relative;
             .content-item-title-icon {
@@ -79,7 +95,7 @@ const props = defineProps({
                     display: flex;
                     align-items: center;
                     margin-top: 16px;
-                margin-right: 40px;
+                    padding-right: 20px;
                     .user-avatar {
                         width: 20px;
                         height: 20px;
@@ -94,6 +110,75 @@ const props = defineProps({
                     }
                 }
             }
+            .commit-item {
+            margin-top: 14px;
+            padding-bottom: 12px;
+            width: 304px;
+            height: 100%;
+            color: #fff;
+            font-family: PingFang SC;
+            font-weight: 400;
+            font-style: Regular;
+            font-size: 14px;
+            background: linear-gradient(0deg, rgba(13, 39, 67, 0.66), rgba(13, 39, 67, 0.66)),
+                        linear-gradient(270deg, rgba(147, 210, 255, 0.06) 0%, rgba(147, 210, 255, 0.16) 100%);
+            .commit-content {
+                width: 284px;
+                margin-left: 10px;
+                padding-top: 12px;
+                padding-bottom: 8px;
             }
+            .commit-statistic {
+                display: flex;
+                padding-left: 10px;
+                padding-right: 10px;
+                .like-item {
+                    display: flex;
+                    align-items: center;
+                    margin-right: 20px;
+                    .like-count {
+                        margin-left: 8px;
+                    }
+
+                }
+                .comment-num-item {
+                    display: flex;
+                    align-items: center;
+                    margin-right: 16px;
+                    .comment-count {
+                        margin-left: 8px;
+                    }
+                }
+                .transmit-item {
+                    display: flex;
+                    align-items: center;
+                    .transmit-count {
+                        margin-left: 8px;
+                    }
+                }
+            }
+            }
+        }
+    }
+    /* 滚动条整体样式 - WebKit浏览器 */
+    .anomalousContent-list::-webkit-scrollbar {
+      width: 5px; /* 垂直滚动条宽度 */
+      height: 5px; /* 水平滚动条高度 */
+    }
+
+    /* 滚动条滑块 */
+    .anomalousContent-list::-webkit-scrollbar-thumb {
+      background: rgba(147, 210, 255, 0.3); /* 蓝色半透明滑块 */
+      border-radius: 4px;
+    }
+
+    /* 鼠标悬停在滑块上的效果 */
+    .anomalousContent-list::-webkit-scrollbar-thumb:hover {
+      background: rgba(147, 210, 255, 0.5); /* 更明显的蓝色 */
+    }
+    .title {
+        margin-top: -7px;
+    }
+    
 }
 </style>

src/views/GroupEvolution/abnormalGroup/index.vue

@@ -1,10 +1,18 @@
 <template>
   <div class="layout-container">
-    <div class="top-container"></div>
+    <div class="top-container">
+      
+    </div>
     <div class="content">
       <div class="left-container">
         <div class="userPanel"></div>
-        <div class="userChart"></div>
+        <div class="userChart">
+          <GroupChart
+            :title="userChartTitleImg"
+            :moduleName="moduleName"
+            :chartData="anomalousGroupStore.chartData"
+          ></GroupChart>
+        </div>
       </div>
       <div class="middle-container">
         <div class="graph"></div>
@@ -46,13 +54,15 @@
 
 <script setup>
 import { ref } from "vue";
-
+import GroupChart from "../component/groupChart.vue";
+import userChartTitleImg from "@/assets/images/abnormalGroup/abnormal-group-hudo-time-chart.png"
 import { Icon } from "@iconify/vue";
 import WordsCloud from "../component/wordsCloud.vue"
 import AnomalousContentInfo from "./components/anomalousContentInfo.vue"
 import { useAnomalousGroup } from "@/store/groupEvolution/index";
 
 const anomalousGroupStore = useAnomalousGroup();
+const moduleName = "全局异常互动时刻表"
 
 //控制弹窗
 const postDialog = ref(false);

src/views/GroupEvolution/component/groupChart.vue

@@ -33,6 +33,10 @@ const props = defineProps({
   chartName: {
     type: String,
     default: ""
+  },
+  moduleName: {
+    type: String,
+    default: ""
   }
 });
 
@@ -95,10 +99,16 @@ const initChart = () => {
     },
     legend: {
       data: legendData,
-      right: 10, // 距离右侧 10px
-      top: 13,
+      itemStyle: {
+        // color: "#fff"
+      },
+      right: 5, // 距离右侧 10px
+      top: 15,
+      itemWidth: 10, // 图例图标的宽度
+      itemHeight: 10, // 图例图标的高度
       textStyle: {
-        color: "#fff"
+        color: "#fff",
+        fontSize: 12
       }
     },
     tooltip: {
@@ -108,11 +118,43 @@ const initChart = () => {
       borderWidth: 0,
       extraCssText: "box-shadow:none;padding:0;",
       formatter: function (params) {
-        const color = {
+        let color = {
           头部自媒体: "#33b6fb",
           官方媒体: "#00d6da",
           普通自媒体: "#fddc33"
         };
+        // 根据传入的值来判断使用的图例颜色
+        switch(props.moduleName) {
+           case "全局群体成员演化图":
+            color = {
+              分裂总数: "#2AB8FD",
+              合并总数: "#02D7DA",
+              收缩指数: "#FFDA09",
+              扩展指数: "#EB57B0"
+            }
+            break;
+            case "群体规模演化图":
+              color = {
+                头部自媒体: "#33b6fb",
+                官方媒体: "#00d6da",
+                普通自媒体: "#fddc33"
+              }
+              break;
+            case "全局异常互动时刻表":
+              color = {
+                社团组一: "#2AB8FD",
+                社团组二: "#02D7DA",
+                社团组三: "#FFDA09"
+              }
+              break;
+            default:
+              color = {
+                头部自媒体: "#33b6fb",
+                官方媒体: "#00d6da",
+                普通自媒体: "#fddc33"
+              }
+        }
+        
         const listHtml = params
           .map(
             (item) => `
@@ -242,7 +284,7 @@ onBeforeUnmount(() => {
     font-weight: 400;
   }
   .container {
-    top: -15px;
+    top: -19px;
     width: 100%;
     height: 180px;
   }

src/views/GroupEvolution/groupIdentifyDiscovery/index.vue

@@ -12,6 +12,7 @@
         <div class="userChart">
           <GroupChart
             :title="groupChartTitleImg"
+            :moduleName="群体规模演化图"
             :chartData="groupDiscoveryStore.chartData"
           ></GroupChart>
         </div>

src/views/GroupEvolution/groupMember/components/groupPanel.vue

@@ -0,0 +1,178 @@
+<template>
+     <div class="groupPanel-component">
+        <img :src="title" alt="" class="title" />
+        <div class="groupPanel-list">
+            <div class="group-item" v-for="group in groupList" :key="group.id">
+              <div class="group-item-title">
+                <img
+                  class="group-item-title-icon"
+                  src="@/assets/images/linkPrediction/title/group-item-title.png"
+                  alt=""
+                />
+               <div class="group-item-title-type">{{ group.type }}</div>
+              </div>
+              <div class="group-item-statistics">
+                <div class="statistics-title">关注话题：{{ group.focusedTopic }}</div>
+                <div class="container" :id="`group-chart-${group.id}`"></div>
+              </div>
+            </div>
+        </div>
+     </div>
+</template>
+
+<script setup>
+import { defineProps, ref, onMounted, onUnmounted } from "vue";
+import * as echarts from "echarts";
+const props = defineProps({
+  groupList: {
+    type: Array,
+    default: () => []
+  },
+  title: {
+    type: String,
+    default: ""
+  }
+});
+
+// 存储图表实例，用于销毁
+const chartInstances = new Map();
+const indicator = [
+    { name: '成长期', max: 30 },
+    { name: '收缩期', max: 30 },
+    { name: '合并期', max: 30 },
+    { name: '分裂期', max: 30 },
+]
+// 初始化图表的外部函数
+const initChart = (groupList) => {
+  groupList.forEach(group => {
+    const chartDom = document.getElementById(`group-chart-${group.id}`);
+    if (chartDom && group.series) {
+      const myChart = echarts.init(chartDom);
+      chartInstances.set(group.id, myChart);
+      const option = {
+        tooltip: {},
+        // 雷达图配置
+        radar: {
+          startAngle: 135, // 原点从 -45° 开始
+          indicator: indicator, // 雷达图坐标轴
+          shape: 'circle', // 圆形分层
+          splitNumber: 5, // 分层的数量
+          //   坐标字体
+          axisName: {
+            color: '#94C1EC',
+            fontSize: 14,
+          },
+          // 圆心到坐标的线
+          axisLine: {
+            lineStyle: {
+              type: 'dashed',
+              color: 'rgba(35, 60, 92, 0.75)'
+            }
+          },
+          //   每个圆的线  
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(37, 50, 67, 1)'
+            }
+          },
+          // 每个圆之间的填充
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['rgba(10, 26, 47, 0.3)', 'rgba(10, 26, 47, 0.5)']
+            }
+          },
+        },
+        series: group.series
+      };
+
+      myChart.setOption(option);
+    }
+  });
+};
+
+onMounted(() => {
+  // 调用初始化图表函数
+  initChart(props.groupList);
+
+  // 响应窗口大小变化
+  window.addEventListener('resize', handleResize);
+});
+
+// 处理窗口大小变化
+const handleResize = () => {
+  chartInstances.forEach(chart => {
+    chart.resize();
+  });
+};
+
+// 组件卸载时销毁图表
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  chartInstances.forEach(chart => {
+    chart.dispose();
+  });
+  chartInstances.clear();
+});
+
+</script>
+
+<style lang="less">
+.groupPanel-component {
+  width: 100%;
+  height: 100%;
+  .title {
+    margin-top: -7px;
+    margin-left: -2px;
+  }
+  .groupPanel-list {
+    width: 100%;
+    height: 470px;
+    padding: 0 20px;
+    overflow: auto;
+    &::-webkit-scrollbar {
+      width: 3px; /* 垂直滚动条宽度 */
+      height: 5px; /* 水平滚动条高度 */
+    }
+    &::-webkit-scrollbar-thumb {
+      background: rgba(147, 210, 255, 0.3); /* 蓝色半透明滑块 */
+      border-radius: 4px;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgba(147, 210, 255, 0.5); /* 更明显的蓝色 */
+    }
+    .group-item {
+      width: 100%;
+      height: 260px;
+      padding-top: 16px;
+      padding-bottom: 20px;
+      border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
+      .group-item-title {
+        position: relative;
+        .group-item-title-type {
+          position: absolute;
+          top: 0;
+          color: #8efbff;
+          left: 17px;
+          font-size: 14px;
+        }
+      }
+      .group-item-statistics {
+        width: 100%;
+        height: 40px;
+        margin-top: 20px;
+        color: #fff;
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-style: Medium;
+        font-size: 14px;
+        .container {
+          left: 40px;
+          width: 218px;
+          height: 170px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/GroupEvolution/groupMember/index.vue

@@ -13,7 +13,13 @@
           ></GroupPanel>
         </div>
         <!-- 全局群体成员演化图 -->
-        <div class="userChart"></div>
+        <div class="userChart">
+          <GroupChart
+            :title="userChartTitleImg"
+            :moduleName="全局群体成员演化图"
+            :chartData="groupMemberStore.chartData"
+          ></GroupChart>
+        </div>
       </div>
       <!-- 中间大矩形 2 -->
       <div class="middle-container">
@@ -60,8 +66,10 @@
 
 <script setup>
 import { ref } from "vue";
-import GroupPanel from "../component/groupPanel.vue";
+import GroupPanel from "./components/groupPanel.vue";
 import GroupAnalysis from "./components/groupAnalysis.vue";
+import GroupChart from "../component/groupChart.vue";
+import userChartTitleImg from "@/assets/images/groupMember/group-member-evolution-chart-title.png"
 // src\views\GroupEvolution\component\wordsCloud.vue
 import WordsCloud from "../component/wordsCloud.vue";
 import userPanelTitleImg from "@/assets/images/groupMember/evolutionAnalysisListTitle.png"
@@ -77,6 +85,9 @@ const postDialog = ref(false);
 //当前选中的贴文数据
 const currentPostPost = ref(null);
 
+// 图例颜色
+
+
 const handleOpenPostDialog = (post) => {
   postDialog.value = true;
   currentPostPost.value = post;

src/views/GroupEvolution/groupStructure/index.vue

@@ -6,6 +6,7 @@
         <div class="userPanel">
           <GroupPanel
             :groupList="groupStructureStore.groupList"
+            :moduleName="全局连通性演化图"
             :title="userPanelTitleImg"
           ></GroupPanel>
         </div>
@@ -86,6 +87,7 @@ const postDialog = ref(false);
 //当前选中的贴文数据
 const currentPostPost = ref(null);
 
+
 const handleOpenPostDialog = (post) => {
   postDialog.value = true;
   currentPostPost.value = post;

src/views/KeyNodeRecognition2/components/graph/bridgeCommunityGraph.vue

@@ -171,19 +171,27 @@ const initChart = async() => {
 
   // 添加鼠标悬浮事件监听
   chartInstance.on('mouseover', function(params) {
-    if (params.data && params.data.category === 0) {
+    if (!params.data) return;
+    const isBridgeNode = params.data.category === 0;
+    const isCommunityNode = params.data.category === 1;
+
+    if (isBridgeNode) {
       // 如果是桥梁节点
       const nodeId = params.data.originalId;
       // 无论当前是否有激活节点，都设置为当前节点
       activeNodeId.value = nodeId;
       updateNodeImage(nodeId, true);
-      
     }
+    
   });
 
   // 添加鼠标离开事件监听
   chartInstance.on('mouseout', function(params) {
-    if (params.data && params.data.category === 0) {
+    if (!params.data) return;
+    const isBridgeNode = params.data.category === 0;
+    const isCommunityNode = params.data.category === 1;
+
+    if (isBridgeNode) {
       // 如果是桥梁节点
       const nodeId = params.data.originalId;
       if (activeNodeId.value === nodeId) {
@@ -384,6 +392,7 @@ const initChart = async() => {
         animationEasingUpdate: 'quinticInOut',
         emphasis: {              // 高亮配置
           focus: 'adjacency',    // 高亮相邻节点
+          blurScope: 'coordinateSystem', // 失去焦点时取消所有高亮
           lineStyle: {           // 高亮时线条样式
             width: 10            // 线条宽度(10)
           }