完成第一个页面初步
This commit is contained in:
qumeng039@126.com
parent
98bdf92a91
commit
90124585f1
25188
src/assets/package/graphvis.esm.min3.js
Normal file
25188
src/assets/package/graphvis.esm.min3.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -123,6 +123,7 @@ watch(
|
|||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
// 让 active-needle 标定在 timeList 最后一个时间点
|
||||
const showHidden = computed(() => {
|
||||
if (!timeList.value || timeList.value.length === 0) return {}
|
||||
|
|
@ -196,13 +197,10 @@ const handlePointPointerDown = (e) => {
|
|||
// 拖动结束时输出当前时间
|
||||
pause() // 拖动或点击时暂停自动播放
|
||||
const currentTimes = TansTimestamp(currentTime.value, "YYYY-MM-DD HH:mm:ss")
|
||||
|
||||
emit("slide:pointerUp", currentTimes)
|
||||
|
||||
document.removeEventListener("pointermove", handlePointerMove)
|
||||
document.removeEventListener("pointerup", handlePointerUp)
|
||||
}
|
||||
|
||||
document.addEventListener("pointermove", handlePointerMove, { passive: true })
|
||||
document.addEventListener("pointerup", handlePointerUp)
|
||||
}
|
||||
|
|
@ -229,9 +227,11 @@ const reset = () => {
|
|||
play()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
play()
|
||||
})
|
||||
|
||||
// 组件卸载时清理事件监听器
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("pointermove", () => {})
|
||||
|
|
|
|||
|
|
@ -20,9 +20,13 @@ export function getPostByUtcTime(utcTime) {
|
|||
return http.get(`/groupEvolution/identify/posts?date=${utcTime}`)
|
||||
}
|
||||
|
||||
//群体识别发现页面关系图
|
||||
export function getRelationGraphByUtcTime(utcTime) {
|
||||
return http.get(`/groupEvolution/identify/relation?date=${utcTime}`)
|
||||
}
|
||||
|
||||
// 3.群体成员演化分析
|
||||
// 3.1 群体成员演化信息列表信息
|
||||
export function getGroupMemberInfoList() {
|
||||
return http.get(`/groupEvolution/groupMember/infoList`)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@ import {
|
|||
getGroupEvolutionGroupScaleChart,
|
||||
getGroupEvolutionTimeLine,
|
||||
getPostByUtcTime,
|
||||
getGroupMemberInfoList
|
||||
getGroupMemberInfoList,
|
||||
getRelationGraphByUtcTime
|
||||
} from "@/service/api/groupEvolution"
|
||||
import { TansTimestamp } from "@/utils/transform"
|
||||
|
||||
|
|
@ -21,6 +22,7 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
|
|||
groupList: [],
|
||||
chartData: {},
|
||||
timeList: [],
|
||||
graph: {},
|
||||
chartsData: {
|
||||
topSelfMedia: {
|
||||
xAxis: [
|
||||
|
|
@ -33,7 +35,7 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
|
|||
"21:57:47",
|
||||
"22:58:12"
|
||||
],
|
||||
yAxis: [0, 0.5, 1.0, 1.5, 2.0, 2.5],
|
||||
yAxis: [0.5, 1.0, 1.5, 2.0, 2.5],
|
||||
data: [1.0, 0.99, 1.0, 1.0, 1.01, 2.03, 1.2, 0.99]
|
||||
},
|
||||
officialMedia: {
|
||||
|
|
@ -47,7 +49,7 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
|
|||
"21:57:47",
|
||||
"22:58:12"
|
||||
],
|
||||
yAxis: [0, 0.5, 1.0, 1.5],
|
||||
yAxis: [0.8, 1.0, 1.2],
|
||||
data: [1.0, 0.99, 1.0, 1.0, 1.01, 1.01, 1.2, 0.99]
|
||||
},
|
||||
ordinaryMedia: {
|
||||
|
|
@ -67,45 +69,52 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
|
|||
},
|
||||
wordCloudData: [
|
||||
{
|
||||
text: "佩洛西",
|
||||
text: "主权权益",
|
||||
top: 115.5,
|
||||
left: 215.5,
|
||||
width: 109,
|
||||
height: 40,
|
||||
fontSize: 28,
|
||||
width: 80,
|
||||
height: 22,
|
||||
fontSize: 13,
|
||||
opacity: 1
|
||||
},
|
||||
{ text: "中国", top: 183.5, left: 69.5, width: 73, height: 35, fontSize: 22, opacity: 1 },
|
||||
{
|
||||
text: "中国人民解放军",
|
||||
text: "局座预言",
|
||||
top: 80,
|
||||
left: 69.5,
|
||||
width: 73,
|
||||
height: 22,
|
||||
fontSize: 12,
|
||||
opacity: 0.7
|
||||
},
|
||||
{
|
||||
text: "吃瓜",
|
||||
top: 72.5,
|
||||
left: 132.5,
|
||||
width: 123,
|
||||
width: 50,
|
||||
height: 22,
|
||||
fontSize: 12,
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
text: "中美关系",
|
||||
top: 171.5,
|
||||
text: "中国海警",
|
||||
top: 140,
|
||||
left: 212.5,
|
||||
width: 81,
|
||||
height: 22,
|
||||
fontSize: 14,
|
||||
width: 130,
|
||||
height: 40,
|
||||
fontSize: 22,
|
||||
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,
|
||||
text: "菲律宾",
|
||||
top: 150,
|
||||
left: 50,
|
||||
width: 81,
|
||||
height: 22,
|
||||
fontSize: 14,
|
||||
opacity: 0.8
|
||||
},
|
||||
{
|
||||
text: "坚决反对",
|
||||
text: "手指",
|
||||
top: 200.5,
|
||||
left: 38.5,
|
||||
width: 73,
|
||||
|
|
@ -114,33 +123,43 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
|
|||
opacity: 0.7
|
||||
},
|
||||
{
|
||||
text: "联合公报",
|
||||
top: 241.5,
|
||||
left: 130.5,
|
||||
text: "装甲船",
|
||||
top: 50,
|
||||
left: 160.5,
|
||||
width: 73,
|
||||
height: 19,
|
||||
fontSize: 12,
|
||||
opacity: 0.7
|
||||
},
|
||||
{
|
||||
text: "有力反制",
|
||||
text: "登检",
|
||||
top: 211.5,
|
||||
left: 143.5,
|
||||
width: 73,
|
||||
width: 50,
|
||||
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 }
|
||||
{ text: "执法", top: 176.5, left: 15.5, width: 49, height: 19, fontSize: 12, opacity: 0.8 },
|
||||
{ text: "现场画面", top: 110, left: 26, width: 90, 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 },
|
||||
{
|
||||
text: "大刀长矛",
|
||||
top: 186,
|
||||
left: 200.5,
|
||||
width: 70,
|
||||
height: 19,
|
||||
fontSize: 12,
|
||||
opacity: 0.8
|
||||
}
|
||||
],
|
||||
posts: []
|
||||
}),
|
||||
actions: {
|
||||
//获取群体列表数据
|
||||
async initializeGroupList(time = "") {
|
||||
const res = await getGroupEvolutionGroupList(time)
|
||||
if (res.code != 200) return
|
||||
|
|
@ -156,6 +175,8 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
|
|||
}))
|
||||
})
|
||||
},
|
||||
|
||||
//获取群体规模演化图数据
|
||||
async initializeGroupScaleChart() {
|
||||
const res = await getGroupEvolutionGroupScaleChart()
|
||||
if (res.code != 200) return
|
||||
|
|
@ -175,14 +196,35 @@ export const useGroupDiscoveryStore = defineStore("groupDiscovery", {
|
|||
this.chartData = resultObj
|
||||
},
|
||||
|
||||
//获取时间轴参数
|
||||
async initialGraphTimestamp() {
|
||||
const res = await getGroupEvolutionTimeLine()
|
||||
if (res.code != 200) return
|
||||
this.timeList = res.data
|
||||
},
|
||||
|
||||
async initialGraphByUtcTime() {},
|
||||
//根据时间参数获取节点数据
|
||||
async initialGraphByUtcTime(utcTime = "") {
|
||||
const res = await getRelationGraphByUtcTime(utcTime)
|
||||
if (res.code != 200) return
|
||||
const newSet = new Set()
|
||||
this.graph["links"] = res.data.links
|
||||
this.graph["nodes"] = res.data.nodes
|
||||
.filter((node) => {
|
||||
if (!newSet.has(node.name)) {
|
||||
newSet.add(node.name)
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
.map((node) => ({
|
||||
id: node.name,
|
||||
name: node.name,
|
||||
groupId: node.groupId
|
||||
}))
|
||||
},
|
||||
|
||||
//根据时间参数获取贴文数据
|
||||
async initialPostByUtcTime(utcTime) {
|
||||
const res = await getPostByUtcTime(utcTime)
|
||||
if (res.code != 200) return
|
||||
|
|
@ -531,13 +573,13 @@ export const useGroupMemberStore = defineStore("groupMember", {
|
|||
id: 1,
|
||||
type: "群体一",
|
||||
focusedTopic: "#中国海警首次登检菲律宾#",
|
||||
value: [10, 5, 15, 5],
|
||||
value: [10, 5, 15, 5]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: "群体二",
|
||||
focusedTopic: "#中国海警首次登检菲律宾#",
|
||||
value: [10, 20, 15, 5],
|
||||
value: [10, 20, 15, 5]
|
||||
}
|
||||
],
|
||||
groupMemberList: [
|
||||
|
|
@ -915,14 +957,14 @@ export const useGroupMemberStore = defineStore("groupMember", {
|
|||
actions: {
|
||||
async initializeGroupList() {
|
||||
const res = await getGroupMemberInfoList()
|
||||
const groupList = res.data.map(item => ({
|
||||
const groupList = res.data.map((item) => ({
|
||||
id: item.id,
|
||||
type: item.type,
|
||||
focusedTopic: item.focusedTopic,
|
||||
value: item.value
|
||||
}))
|
||||
this.groupList = groupList
|
||||
console.log("测试获取groupList:",res);
|
||||
console.log("测试获取groupList:", res)
|
||||
}
|
||||
},
|
||||
persist: false // 开启持久化
|
||||
|
|
@ -932,7 +974,7 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
|
|||
state: () => ({
|
||||
groupList: [
|
||||
{
|
||||
id:1,
|
||||
id: 1,
|
||||
type: "异常社团组一",
|
||||
abnormalGroup: [
|
||||
{
|
||||
|
|
@ -948,7 +990,7 @@ export const useAnomalousGroup = defineStore("anomalousGroup", {
|
|||
]
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
id: 2,
|
||||
type: "异常社团组二",
|
||||
abnormalGroup: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -17,24 +17,151 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from "vue"
|
||||
import { defineProps, defineEmits, onMounted, watch, nextTick } from "vue"
|
||||
import { storeToRefs } from "pinia"
|
||||
import * as echarts from "echarts"
|
||||
import TimeAxis from "@/components/timeAxis.vue"
|
||||
import { convertToUtcIsoString } from "@/utils/transform"
|
||||
import nodeHoverImg from "@/assets/images/nodeHover.png"
|
||||
const props = defineProps({
|
||||
store: {
|
||||
required: true
|
||||
}
|
||||
})
|
||||
let chart = null
|
||||
const emit = defineEmits(["click:pointerDownAndSlide"])
|
||||
// 解构 store 中的 state
|
||||
const { timeList } = storeToRefs(props.store)
|
||||
const { timeList, graph } = storeToRefs(props.store)
|
||||
|
||||
// 处理时间轴点击事件和拉动
|
||||
const handlePointerDown = (time) => {
|
||||
const utcTime = convertToUtcIsoString(time)
|
||||
emit("click:pointerDownAndSlide", utcTime)
|
||||
}
|
||||
|
||||
const initChart = () => {
|
||||
if (chart == null) {
|
||||
chart = echarts.init(document.getElementById("container"))
|
||||
}
|
||||
if (Object.keys(graph.value).length === 0) {
|
||||
chart.clear()
|
||||
return
|
||||
}
|
||||
|
||||
function variableColorAndPos(groupId) {
|
||||
const resultMap = {
|
||||
0: { color: "#1f8473", x: 100, y: 100 },
|
||||
1: { color: "#807d2c", x: 300, y: 300 },
|
||||
6: { color: "#0c7090", x: 600, y: 600 }
|
||||
}
|
||||
return resultMap[parseInt(groupId)]
|
||||
}
|
||||
|
||||
const option = {
|
||||
//hover上去的窗口
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "rgba(0,0,0,0)", // 透明背景
|
||||
borderColor: "rgba(0,0,0,0)", // 透明边框
|
||||
borderWidth: 0,
|
||||
extraCssText: "box-shadow:none;padding:0;",
|
||||
formatter: function (params) {
|
||||
if (params.dataType === "node") {
|
||||
return `<div
|
||||
style="
|
||||
padding:10px 15px;
|
||||
height: 68px;
|
||||
border-radius: 4px;
|
||||
background: url('${nodeHoverImg}');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
">
|
||||
<div style="color:#fff;letter-spacing: 0.14px;">
|
||||
<div >用户名：${params.data.name}</div>
|
||||
<div >组ID：${params.data.groupId}</div>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
return ""
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
edgeLabel: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: 18,
|
||||
textShadowColor: "#fff",
|
||||
textShadowBlur: 0,
|
||||
textShadowOffsetX: 0,
|
||||
textShadowOffsetY: 0
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "graph",
|
||||
layout: "force",
|
||||
animation: false,
|
||||
draggable: true,
|
||||
roam: true,
|
||||
zoom: 0.1,
|
||||
force: {
|
||||
initLayout: "circular", // 初始布局使用圆形
|
||||
edgeLength: 6000,
|
||||
repulsion: 5000,
|
||||
gravity: 0.1,
|
||||
friction: 0.02,
|
||||
coolingFactor: 0.1
|
||||
},
|
||||
|
||||
animationDurationUpdate: 3500, // 节点移动更平滑
|
||||
data: graph.value?.nodes.map((node) => ({
|
||||
...node,
|
||||
symbol: "circle",
|
||||
x: variableColorAndPos(node.groupId).x,
|
||||
y: variableColorAndPos(node.groupId).y,
|
||||
symbolSize: 40,
|
||||
itemStyle: {
|
||||
color: variableColorAndPos(node.groupId).color,
|
||||
opacity: 1,
|
||||
borderColor: "#46C6AD",
|
||||
borderWidth: 1,
|
||||
shadowBlur: 4,
|
||||
borderType: "solid",
|
||||
shadowColor: "rgba(19, 27, 114, 0.25)"
|
||||
}
|
||||
})),
|
||||
links: graph.value?.links,
|
||||
lineStyle: {
|
||||
color: "#37ACD7",
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
chart.setOption(option)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
})
|
||||
let lastPostsLength = 0 //当列表更新时，记录上一次的长度
|
||||
watch(
|
||||
() => graph.value,
|
||||
(newValue) => {
|
||||
if (newValue.nodes.length > lastPostsLength) {
|
||||
nextTick(() => {
|
||||
initChart()
|
||||
})
|
||||
}
|
||||
lastPostsLength = newValue.nodes.length //实现按需更新
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
|
|
|||
|
|
@ -69,7 +69,8 @@ const optionHandle = ({ xAxis, yAxis, data }, flag) => {
|
|||
nameLocation: "end",
|
||||
data: yAxis,
|
||||
max: Math.max(...yAxis),
|
||||
min: 0,
|
||||
min: 0.9,
|
||||
|
||||
nameTextStyle: {
|
||||
color: "#B6D6F7",
|
||||
fontSize: 13,
|
||||
|
|
|
|||
|
|
@ -77,12 +77,14 @@ const handleOpenPostDialog = (post) => {
|
|||
const handleChangeXAxis = (utcTime) => {
|
||||
groupDiscoveryStore.initializeGroupList(utcTime) //随着时间变动，更新群体列表
|
||||
groupDiscoveryStore.initialPostByUtcTime(utcTime) //随着时间轴变动，更新贴文列表
|
||||
groupDiscoveryStore.initialGraphByUtcTime(utcTime) //随着时间轴变动，更新关系图
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
groupDiscoveryStore.initializeGroupList()
|
||||
groupDiscoveryStore.initializeGroupScaleChart()
|
||||
groupDiscoveryStore.initialGraphTimestamp()
|
||||
groupDiscoveryStore.initialGraphByUtcTime()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user