diff --git a/src/assets/images/abnormalGroup/abnormal-group-hudo-time-chart.png b/src/assets/images/abnormalGroup/abnormal-group-hudo-time-chart.png new file mode 100644 index 0000000..25a8d75 Binary files /dev/null and b/src/assets/images/abnormalGroup/abnormal-group-hudo-time-chart.png differ diff --git a/src/assets/images/groupMember/group-member-evolution-chart-title.png b/src/assets/images/groupMember/group-member-evolution-chart-title.png new file mode 100644 index 0000000..7c23ba1 Binary files /dev/null and b/src/assets/images/groupMember/group-member-evolution-chart-title.png differ diff --git a/src/store/groupEvolution/index.js b/src/store/groupEvolution/index.js index 81281d1..73b4d31 100644 --- a/src/store/groupEvolution/index.js +++ b/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] + } + ] + }, + }) }) diff --git a/src/views/GroupEvolution/abnormalGroup/components/anomalousContentInfo.vue b/src/views/GroupEvolution/abnormalGroup/components/anomalousContentInfo.vue index 52c2be3..bcfc80d 100644 --- a/src/views/GroupEvolution/abnormalGroup/components/anomalousContentInfo.vue +++ b/src/views/GroupEvolution/abnormalGroup/components/anomalousContentInfo.vue @@ -30,9 +30,25 @@ -
- -
+
+
{{ content.content }}
+
+ +
+ + +
{{ content.commentCount }}
+
+
+ +
{{ content.shareCount }}
+
+
+
@@ -52,15 +68,15 @@ const props = defineProps({ .anomalousContent-component { width: 100%; height: 100%; - .title { - margin-top: -7px; - } - .content-item { + .anomalousContent-list { width: 100%; - margin-left: 24px; - padding-bottom: 20px; - border-bottom: 0.5px solid rgba(0, 113, 188, 0.5); - .content-item-title { + height: 500px; + overflow: auto; + .content-item { + width: 100%; + padding-left: 24px; + padding-bottom: 20px; + .content-item-title { position: relative; .content-item-title-icon { width: 160px; @@ -72,28 +88,97 @@ const props = defineProps({ left: 12px; font-size: 14px; } - } - .content-item-users { - display: flex; - .user-item { + } + .content-item-users { display: flex; - align-items: center; - margin-top: 16px; - margin-right: 40px; - .user-avatar { - width: 20px; - height: 20px; - margin-right: 6px; + .user-item { + display: flex; + align-items: center; + margin-top: 16px; + padding-right: 20px; + .user-avatar { + width: 20px; + height: 20px; + margin-right: 6px; + } + .user-name { + font-family: "PingFang SC"; + color: #fff; + font-size: 16px; + font-style: Bold; + font-weight: 400; + } } - .user-name { - font-family: "PingFang SC"; - color: #fff; - font-size: 16px; - font-style: Bold; - font-weight: 400; + } + .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; + } + } diff --git a/src/views/GroupEvolution/abnormalGroup/index.vue b/src/views/GroupEvolution/abnormalGroup/index.vue index 2dd8318..7bf74b3 100644 --- a/src/views/GroupEvolution/abnormalGroup/index.vue +++ b/src/views/GroupEvolution/abnormalGroup/index.vue @@ -1,10 +1,18 @@