Merge branch 'master' of http://172.16.20.1:3000/duanhao/SocialNetworks_duan

src/store/groupEvolution/index.js

@@ -210,9 +210,13 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
 
       // 定义明确的群体顺序
       const groupOrder = ["群体一", "群体二", "群体三"]
-      groupOrder.forEach(key => {
+      groupOrder.forEach((key) => {
         if (res.data.data[key]) {
-          resultObj["seriesList"].push({ name: key, themeColor: themeMap[key], data: res.data.data[key] })
+          resultObj["seriesList"].push({
+            name: key,
+            themeColor: themeMap[key],
+            data: res.data.data[key]
+          })
         }
       })
       this.chartData = resultObj
@@ -693,7 +697,7 @@ export const useGroupMemberStore = defineStore("groupMember", {
         fontSize: 12,
         opacity: 0.8
       }
-    ],
+    ]
   }),
   actions: {
     // 获取时间轴
@@ -1158,9 +1162,9 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
       const xAxisData = res.data.xaxisData.map((item) => utcStringToHHMMSS(item))
       const yAxisRange = res.data.yaxisRange
       const themeColors = {
-        社团一: "#2AB8FD",
-        社团二: "#02D7DA",
-        社团三: "#FFDA09"
+        社团一: "#00d6da",
+        社团二: "#fddc33",
+        社团三: "#32b6fb"
       }
       const seriesList = res.data.seriesList.map((item) => ({
         data: item.data.map((item) => item.toFixed(2)),

src/views/GroupEvolution/components/groupGraph.vue

@@ -2,9 +2,18 @@
   <div class="groupGraph-component">
     <img src="@/assets/images/groupEvolution/graph-title.png" class="titleImage" />
     <div class="container" id="container"></div>
-    <div class="legends" v-show="storeId == 'anomalousGroup'">
-      <img class="legend-icon" src="@/assets/images/abnormalGroup/abnormal-node-legend-icon.png" />
-      <div class="legend-text">疑似异常社团</div>
+
+    <div class="legends" style="top: 55%" v-show="storeId == 'anomalousGroup'">
+      <div class="legend-item" v-for="item in legendsMap.abnormalGroup" :key="item.text">
+        <img class="legend-icon" :src="item.icon" />
+        <div class="legend-text">{{ item.text }}</div>
+      </div>
+    </div>
+    <div class="legends" style="top: 60%" v-show="!(storeId == 'anomalousGroup')">
+      <div class="legend-item" v-for="item in legendsMap.normalGroup" :key="item.text">
+        <img class="legend-icon" :src="item.icon" />
+        <div class="legend-text">{{ item.text }}</div>
+      </div>
     </div>
     <div class="timeList">
       <TimeAxis
@@ -27,12 +36,29 @@ import { convertToUtcIsoString } from "@/utils/transform"
 import { paintNodeFunction, paintLineFunction } from "@/utils/customePaint"
 import TimeAxis from "@/components/timeAxis.vue"
 import GraphVis from "@/assets/package/graphvis.esm.min2.js"
+import group1Leg from "@/assets/images/groupEvolution/legends-group1.png"
+import group2Leg from "@/assets/images/groupEvolution/legends-group2.png"
+import group3Leg from "@/assets/images/groupEvolution/legends-group3.png"
+import abnormalLeg from "@/assets/images/groupEvolution/legends-abnormal-group.png"
 
 const props = defineProps({
   store: {
     required: true
   }
 })
+const legendsMap = {
+  normalGroup: [
+    { icon: group1Leg, text: "群体一" },
+    { icon: group2Leg, text: "群体二" },
+    { icon: group3Leg, text: "群体三" }
+  ],
+  abnormalGroup: [
+    { icon: group1Leg, text: "社团组一" },
+    { icon: group2Leg, text: "社团组二" },
+    { icon: group3Leg, text: "社团组三" },
+    { icon: abnormalLeg, text: "疑似异常社团" }
+  ]
+}
 const emit = defineEmits(["click:pointerDownAndSlide"])
 const { timeList, graph } = storeToRefs(props.store)
 let isPlay = ref(false)
@@ -365,31 +391,48 @@ watch(
   .legends {
     position: absolute;
     display: flex;
-    align-items: center;
+    flex-direction: column; /* 改为垂直排列 */
+    align-items: flex-start; /* 左对齐 */
     justify-content: center;
     width: 160px;
-    height: 55px;
+    height: auto; /* 高度自适应内容 */
     right: 2%;
-    top: 76%;
-    background-image: url("@/assets/images/abnormalGroup/abnormal-group-legends.png");
+    background: linear-gradient(
+      286.05deg,
+      rgba(0, 82, 125, 0.48) 32.99%,
+      rgba(0, 200, 255, 0.2304) 233.73%
+    );
+    border: 1px solid;
+    border-radius: 5px;
+    border-image-source: linear-gradient(
+      153.08deg,
+      rgba(183, 222, 255, 0.32) 3.37%,
+      rgba(58, 161, 248, 0.064) 83.16%
+    );
+    padding: 10px; /* 添加内边距 */
+    gap: 10px; /* 设置项间距 */
+    .legend-item {
+      display: flex;
+      flex-direction: row; /* 改为水平排列 */
+      align-items: center;
+      justify-content: flex-start;
+      width: 100%;
+      /* 移除gap属性，因为现在在.legends上设置 */
+    }
     .legend-icon {
-      position: absolute;
-      top: 17px;
-      left: 15px;
+      /* 移除绝对定位 */
       width: 30px;
       height: 30px;
+      margin-right: 10px; /* 图标和文本之间的间距 */
     }
     .legend-text {
-      position: absolute;
-      top: 12px;
-      left: 50px;
+      /* 移除绝对定位 */
       height: 30px;
       line-height: 30px;
       font-family: "PingFang SC";
       font-style: normal;
       font-weight: 400;
       font-size: 16px;
-      font-weight: 400;
       color: #fff;
     }
   }