duanhao/SocialNetworks_duan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

模块四接口准备，小问题修复

Browse Source
This commit is contained in:
duanhao 2025-08-07 20:13:42 +08:00
parent de3a912705
commit ebe1ce8536
7 changed files with 153 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/service/api/groupEvolution.js
View File

@ -80,3 +80,26 @@ export function getGroupMemberEvolutionAnalysisChart() {
return http.get(`/groupEvolution/groupMember/rightChart`)
}
// 4.异常群体捕捉
// 4.1获取时间轴
export function getAbnormalGroupTimeLine() {
return http.get(`/groupEvolution/groupMember/timeline`)
}
// 4.2获取异常群体列表-z左上
export function getAbnormalGroupList(time) {
return http.get(`/groupEvolution/abnormalGroup/infoList?time=${time}`)
}
// 4.3全局异常互动时刻表-左下
export function getAbnormalGroupInteractionChart() {
return http.get(`/groupEvolution/abnormalGroup/chart`)
}
// 4.4异常行为分析
export function getAbnormalGroupBehaviorPosts(time) {
return http.get(`/groupEvolution/abnormalGroup/posts/date=${time}`)
}
// 4.5 异常互动行为内容详情
export function getAbnormalGroupBehaviorDetail(time) {
return http.get(`/groupEvolution/abnormalGroup/detail?time=${time}`)
}

78
src/store/groupEvolution/index.js
View File

@ -24,6 +24,14 @@ import {
getGroupMemberChart,
getGroupMemberEvolutionInfoByTime,
getGroupMemberEvolutionAnalysisChart,
// 4.异常群体捕捉
getAbnormalGroupTimeLine,
getAbnormalGroupList,
getAbnormalGroupInteractionChart,
getAbnormalGroupBehaviorPosts,
getAbnormalGroupBehaviorDetail,
getRelationGraphByUtcTime
} from "@/service/api/groupEvolution"
import { TansTimestamp, utcStringToHHMMSS, getMaxCeiled, parsePercentage } from "@/utils/transform"
@ -299,7 +307,7 @@ export const useGroupStructureStore = defineStore("groupStructure", {
]
},
chartsData: {
topSelfMedia: [
/* topSelfMedia: [
{
id: 1,
name: "内部密度指数演化",
@ -394,7 +402,7 @@ export const useGroupStructureStore = defineStore("groupStructure", {
]
}
}
]
] */
},
wordCloudData: [
{
@ -1039,11 +1047,13 @@ export const useGroupMemberStore = defineStore("groupMember", {
]
}),
actions: {
// 获取时间轴
async initializeGroupMemberTimeLine() {
const res = await getGroupMemberTimeLine()
this.timeList = res.data
// console.log("测试获取timeList:",this.timeList);
},
// 群体成员演化信息列表-左上
async initializeGroupList(time = "2024-06-19T07:57:46Z") {
const res = await getGroupMemberInfoList(time)
console.log("测试获取groupMemberInfoList:", res)
@ -1095,7 +1105,7 @@ export const useGroupMemberStore = defineStore("groupMember", {
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
yAxisRange: {min: 0, max: Math.ceil((item.chart.yaxisRange.max) / 5) * 5, interval: Math.ceil((item.chart.yaxisRange.max) / 5)},
seriesList: item.chart.seriesList.map((item) => ({
data: item.data,
data: item.data.map((item) => item.toFixed(2)),
name: item.name,
themeColor: themeColors[item.name]
}))
@ -1109,7 +1119,7 @@ export const useGroupMemberStore = defineStore("groupMember", {
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
yAxisRange: {min: 0, max: Math.ceil((item.chart.yaxisRange.max) / 5) * 5, interval: Math.ceil((item.chart.yaxisRange.max) / 5)},
seriesList: item.chart.seriesList.map((item) => ({
data: item.data,
data: item.data.map((item) => item.toFixed(2)),
name: item.name,
themeColor: themeColors[item.name]
}))
@ -1123,7 +1133,7 @@ export const useGroupMemberStore = defineStore("groupMember", {
xAxisData: item.chart.xaxisData.map((item) => utcStringToHHMMSS(item)),
yAxisRange: {min: 0, max: Math.ceil((item.chart.yaxisRange.max) / 5) * 5, interval: Math.ceil((item.chart.yaxisRange.max) / 5)},
seriesList: item.chart.seriesList.map((item) => ({
data: item.data,
data: item.data.map((item) => item.toFixed(2)),
name: item.name,
themeColor: themeColors[item.name]
}))
@ -1176,6 +1186,8 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
]
}
],
graph: {},
timeList: [],
wordCloudData: [
{
text: "局座",
@ -1364,5 +1376,59 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
KS: 0.02
}
]
})
}),
actions: {
// 获取时间轴数据-中间时间轴
async initializeAbnormalGroupTimeLine() {
const res = await getAbnormalGroupTimeLine()
if (res.code === 200) {
this.timeList = res.data
}
},
// 异常用户组展示-左上
async initializeAbnormalGroupList(time = '2024-06-19T07:57:46Z') {
const res = await getAbnormalGroupList(time)
if (res.code === 200) {
this.abnormalGroupList = res.data
}
},
// 全局异常互动时刻表-左下
async initializeAbnormalGroupInteractionChart() {
const res = await getAbnormalGroupInteractionChart()
const xAxisData = res.data.xaxisData.map((item) => utcStringToHHMMSS(item))
const yAxisRange = res.data.yaxisRange
const themeColors = {
社团组一: "#2AB8FD",
社团组二: "#02D7DA",
社团组三: "#FFDA09"
}
const seriesList = res.data.seriesList.map((item) => ({
data: item.data.map((item) => item.toFixed(2)),
name: item.name,
themeColor: themeColors[item.name]
}))
this.chartData = {
xAxisData,
yAxisRange,
seriesList
}
},
// 异常行为分析-中下
async initializeAbnormalGroupPosts(time = '2024-06-19T07:57:46Z') {
const res = await getAbnormalGroupBehaviorPosts(time)
if (res.code === 200) {
this.posts = res.data
}
},
// 异常互动详情-右上
async initializeAbnormalGroupInteractionDetail(time = '2024-06-19T07:57:46Z') {
const res = await getAbnormalGroupBehaviorDetail(time)
if (res.code === 200) {
this.interactionDetail = res.data
}
},
},
persist: true // 开启持久化
})

27
src/views/GroupEvolution/abnormalGroup/index.vue
View File

@ -18,7 +18,12 @@
</div>
</div>
<div class="middle-container">
<div class="graph"></div>
<div class="graph">
<GroupGraph
:store="anomalousGroupStore"
@click:pointerDownAndSlide="handleChangeXAxis"
></GroupGraph>
</div>
<div class="postList">
<GroupPost :posts="anomalousGroupStore.posts" :isAbnormal="true" :moduleName="moduleName"></GroupPost>
</div>
@ -58,10 +63,11 @@
</template>
<script setup>
import { ref } from "vue";
import { onMounted, ref } from "vue";
import userGroupTitle from "@/assets/images/abnormalGroup/abnormal-user-group-title.png"
import userChartTitleImg from "@/assets/images/abnormalGroup/abnormal-group-hudo-time-chart.png"
import { Icon } from "@iconify/vue";
import GroupGraph from "../component/groupGraph.vue"
import WordsCloud from "../component/wordsCloud.vue"
import GroupPanel from "./components/groupPanel.vue"
import GroupPost from "../component/groupPost.vue"
@ -72,6 +78,18 @@ import { useAnomalousGroup } from "@/store/groupEvolution/index";
const anomalousGroupStore = useAnomalousGroup();
const moduleName = "异常行为分析"
const handleChangeXAxis = (utcTime) => {
console.log("点击时间轴：",utcTime)
// 根据时间轴变化更改群体结构信息列表
// 根据时间轴变化更改群体结构演化分析的群体演化信息-中下-随时间轴变化
}
//控制弹窗
const postDialog = ref(false);
@ -82,6 +100,11 @@ const handleOpenPostDialog = (post) => {
postDialog.value = true;
currentPostPost.value = post;
};
onMounted(async () => {
await anomalousGroupStore.initializeAbnormalGroupTimeLine()
})
</script>
<style scoped lang="less">

2
src/views/GroupEvolution/component/groupChart.vue
View File

@ -195,7 +195,7 @@ const initChart = () => {
.join("")
return `
<div style="
width:150px;
border-radius:6px;
background:linear-gradient(304deg, rgba(28,103,175,0.3) -6.04%, rgba(2,95,137,0.3) 85.2%);
backdrop-filter:blur(4px);

1
src/views/GroupEvolution/groupMember/components/groupAnalysis.vue
View File

@ -96,6 +96,7 @@ onMounted(() => {
.tabs {
width: 97%;
height: 24px;
padding: 0px 20px;
border-radius: 4px;
display: flex;
justify-content: space-between;

18
src/views/GroupEvolution/groupMember/components/groupPanel.vue
View File

@ -81,17 +81,15 @@ const updateCharts = (groupList) => {
if (chartInstances.has(group.id)) {
// 图表实例存在，只更新数据
const myChart = chartInstances.get(group.id);
// 计算maxValue
const firstElement = group.value[0];
const allEqual = group.value.every(item => item === firstElement);
let maxValue = 0;
if(allEqual){
maxValue = Number(firstElement) + 40;
maxValue = parseFloat(firstElement) + 40;
}else{
maxValue = Math.ceil(Math.max(...group.value));
maxValue = Math.ceil(Math.max(...group.value.map(item => parseFloat(item))));
}
// 更新图表选项
myChart.setOption({
radar: {
@ -135,9 +133,9 @@ const updateCharts = (groupList) => {
const allEqual = group.value.every(item => item === firstElement);
let maxValue = 0;
if(allEqual){
maxValue = firstElement + 20;
maxValue = parseFloat(firstElement) + 20;
}else{
maxValue = Math.ceil(Math.max(...group.value));
maxValue = Math.ceil(Math.max(...group.value.map(item => parseFloat(item))));
}
const option = {
@ -163,10 +161,10 @@ const updateCharts = (groupList) => {
flex-direction: column;
">
<div style="color:#fff;letter-spacing: 0.14px;">
<div >成长：${params.data.value[0] - 20}</div>
<div >收缩：${params.data.value[1] - 20}</div>
<div >合并：${params.data.value[2] - 20}</div>
<div >分裂：${params.data.value[3] - 20}</div>
<div >成长：${(parseFloat(params.data.value[0]) - 20).toFixed(2)}</div>
<div >收缩：${(parseFloat(params.data.value[1]) - 20).toFixed(2)}</div>
<div >合并：${(parseFloat(params.data.value[2]) - 20).toFixed(2)}</div>
<div >分裂：${(parseFloat(params.data.value[3]) - 20).toFixed(2)}</div>
</div>
</div>`;
}

24
src/views/GroupEvolution/groupStructure/components/groupAnalysis.vue
View File

@ -27,7 +27,7 @@
</template>
<script setup>
import { defineProps, onMounted, ref } from "vue";
import { defineProps, onMounted, ref, watch } from "vue";
import GroupChart from "../../component/groupChart.vue";
const curSelectedTab = ref("头部自媒体");
const curSelectedTabData = ref(null);
@ -43,6 +43,27 @@ const props = defineProps({
}
});
// 添加对chartsData的深度监听
watch(
() => props.chartsData,
(newVal) => {
// 当chartsData加载完成且不为空时，更新当前选中标签的数据
if (newVal && Object.keys(newVal).length > 0) {
const keyMapList = {
头部自媒体: "topSelfMedia",
官方媒体: "officalMedia",
普通自媒体: "ordinaryMedia"
};
const currentKey = keyMapList[curSelectedTab.value];
if (newVal[currentKey]) {
curSelectedTabData.value = newVal[currentKey];
}
}
},
{ deep: true, immediate: true } // 深度监听并立即执行一次
);
const handleSwitch = (item) => {
curSelectedTab.value = item;
const keyMapList = {
@ -71,6 +92,7 @@ onMounted(() => {
flex-direction: column;
align-items: center;
.tabs {
padding: 0px 20px;
width: 97%;
height: 24px;
border-radius: 4px;