Compare commits
9 Commits
991fa5ab08
...
00d1c46e62
| Author | SHA1 | Date |
|---|---|---|
aaaa
|
00d1c46e62 | 5 months ago |
|
aaaa
|
cccf2de390 | 5 months ago |
|
aaaa
|
f96819ec5a | 5 months ago |
|
aaaa
|
d5a38a9a4c | 5 months ago |
 lijiaqi
|
e03d6e2f69 | 5 months ago |
|
lijiaqi
|
e998c80678 | 5 months ago |
|
lijiaqi
|
a1dda3e08a | 5 months ago |
|
lijiaqi
|
cc50542108 | 5 months ago |
|
lijiaqi
|
7014892386 | 5 months ago |
30 changed files with 1371 additions and 717 deletions
@ -1,4 +1,8 @@ |
||||
# 变量必须以 VITE_ 为前缀才能暴露给外部读取 |
||||
NODE_ENV = 'development' |
||||
VITE_APP_TITLE = '无糖运营平台' |
||||
VITE_APP_BASE_API = 'http://39.106.16.162:8080' |
||||
<<<<<<< HEAD |
||||
VITE_APP_BASE_API = 'http://127.0.0.1:8008' |
||||
======= |
||||
VITE_APP_BASE_API = 'http://39.106.16.162:8080' |
||||
>>>>>>> 991fa5ab08c56c84c5a276226f8fbc2ec78f859a |
||||
|
||||
|
After Width: | Height: | Size: 640 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 210 KiB |
|
After Width: | Height: | Size: 131 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 206 KiB |
|
After Width: | Height: | Size: 180 KiB |
|
After Width: | Height: | Size: 166 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 142 KiB |
|
After Width: | Height: | Size: 359 KiB |
|
After Width: | Height: | Size: 277 KiB |
|
After Width: | Height: | Size: 609 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 557 KiB |
|
After Width: | Height: | Size: 122 KiB |
@ -0,0 +1,430 @@ |
||||
<template> |
||||
<div> |
||||
|
||||
<div class="container"> |
||||
<div class="goto" @click="goBack"> |
||||
<p>返回</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" > |
||||
import * as d3 from 'd3'; |
||||
import { useRouter } from 'vue-router' |
||||
// import portal from './portal/LearningPathRecommendations.vue' |
||||
|
||||
|
||||
|
||||
// import { onMounted } from 'vue'; |
||||
|
||||
export default { |
||||
name: 'courseHomepage', |
||||
data() { |
||||
return { |
||||
svgArea: null, |
||||
links: [], |
||||
nodes: [], |
||||
nodesName: [], |
||||
linksName: [], |
||||
simulation: null, |
||||
scale: 1, |
||||
width: 800, |
||||
height: 635, |
||||
colorList: ['#91CC75', '#5470C6', '#FAC858', '#EE6666', '#73C0DE', '#EA7CCC', '#5577FF', '#5577FF', '#9DBFFF', '#78A7FF'], |
||||
// colorList: ['#E5A1D6', '#A893F5', '#D0A4FB', '#C3ACF6', '#FBBABB', '#8B81F7', '#A893F5', '#D0A4FB', '#C3ACF6', '#FBBABB'], |
||||
testGraph: { |
||||
"nodes": [], |
||||
"links": [] |
||||
// "nodes": [ |
||||
// { "id": "Myriel", "group": 8 }, |
||||
// { "id": "Napoleon", "group": 2 }, |
||||
// { "id": "Mlle.Baptistine", "group": 3 }, |
||||
// { "id": "Mme.Magloire", "group": 1 }, |
||||
// { "id": "CountessdeLo", "group": 5 }, |
||||
// { "id": "Geborand", "group": 5 }, |
||||
// { "id": "Champtercier", "group": 6 }, |
||||
// { "id": "Cravatte", "group": 7 }, |
||||
// { "id": "Count", "group": 8 }, |
||||
// { "id": "OldMan", "group": 9 }, |
||||
// { "id": "Labarre", "group": 5 }, |
||||
// { "id": "Valjean", "group": 1 }, |
||||
// { "id": "Marguerite", "group": 3 }, |
||||
// { "id": "Mme.deR", "group": 2 }, |
||||
// { "id": "Isabeau", "group": 5 }, |
||||
// { "id": "Gervais", "group": 9 }, |
||||
// { "id": "Tholomyes", "group": 8 }, |
||||
// { "id": "Listolier", "group": 7 }, |
||||
// { "id": "Fameuil", "group": 6 }, |
||||
// { "id": "Blacheville", "group": 5 }, |
||||
// { "id": "Favourite", "group": 4 }, |
||||
// { "id": "Dahlia", "group": 3 }, |
||||
// { "id": "Zephine", "group": 9 }, |
||||
// { "id": "Fantine", "group": 3 }, |
||||
// { "id": "Mme.Thenardier", "group": 4 }, |
||||
// { "id": "Thenardier", "group": 4 }, |
||||
// { "id": "Cosette", "group": 5 }, |
||||
// { "id": "Javert", "group": 4 }, |
||||
// { "id": "Fauchelevent", "group": 0 }, |
||||
// { "id": "Bamatabois", "group": 2 }, |
||||
|
||||
// // { "id": "Mme.Hucheloup", "group": 8 } |
||||
// ], |
||||
// "links": [ |
||||
// { "source": "Napoleon", "target": "Myriel", "value": 7 }, |
||||
// { "source": "Mlle.Baptistine", "target": "Myriel", "value": 7 }, |
||||
// { "source": "Mme.Magloire", "target": "Myriel", "value": 7 }, |
||||
// { "source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 7 }, |
||||
// { "source": "CountessdeLo", "target": "Myriel", "value": 7 }, |
||||
// { "source": "Geborand", "target": "Myriel", "value": 7 }, |
||||
// { "source": "Champtercier", "target": "Myriel", "value": 7 }, |
||||
// { "source": "Cravatte", "target": "Myriel", "value": 7 }, |
||||
// { "source": "Count", "target": "Myriel", "value": 7 }, |
||||
// { "source": "OldMan", "target": "Myriel", "value": 7 }, |
||||
// { "source": "Valjean", "target": "Labarre", "value": 7 }, |
||||
// { "source": "Valjean", "target": "Mme.Magloire", "value": 7 }, |
||||
// { "source": "Valjean", "target": "Mlle.Baptistine", "value": 3 }, |
||||
// { "source": "Valjean", "target": "Myriel", "value": 5 }, |
||||
// { "source": "Marguerite", "target": "Valjean", "value": 1 }, |
||||
// { "source": "Mme.deR", "target": "Valjean", "value": 1 }, |
||||
// { "source": "Isabeau", "target": "Valjean", "value": 1 }, |
||||
// { "source": "Gervais", "target": "Valjean", "value": 1 }, |
||||
// { "source": "Listolier", "target": "Tholomyes", "value": 4 }, |
||||
// { "source": "Fameuil", "target": "Tholomyes", "value": 4 }, |
||||
// { "source": "Fameuil", "target": "Listolier", "value": 4 }, |
||||
// { "source": "Blacheville", "target": "Tholomyes", "value": 4 }, |
||||
// { "source": "Blacheville", "target": "Listolier", "value": 4 }, |
||||
// { "source": "Blacheville", "target": "Fameuil", "value": 4 }, |
||||
// { "source": "Favourite", "target": "Tholomyes", "value": 3 }, |
||||
// { "source": "Favourite", "target": "Listolier", "value": 3 }, |
||||
// { "source": "Favourite", "target": "Fameuil", "value": 3 }, |
||||
// { "source": "Favourite", "target": "Blacheville", "value": 4 }, |
||||
// { "source": "Dahlia", "target": "Tholomyes", "value": 3 }, |
||||
// { "source": "Dahlia", "target": "Listolier", "value": 3 }, |
||||
// { "source": "Dahlia", "target": "Fameuil", "value": 3 }, |
||||
// { "source": "Dahlia", "target": "Blacheville", "value": 3 }, |
||||
// { "source": "Dahlia", "target": "Favourite", "value": 5 }, |
||||
// { "source": "Zephine", "target": "Tholomyes", "value": 3 }, |
||||
// { "source": "Zephine", "target": "Listolier", "value": 3 }, |
||||
// { "source": "Zephine", "target": "Fameuil", "value": 3 }, |
||||
|
||||
// // { "source": "Mme.Hucheloup", "target": "Enjolras", "value": 1 } |
||||
// ] |
||||
// "links":[] |
||||
} |
||||
|
||||
} |
||||
|
||||
}, |
||||
created() { |
||||
this.getGraphData() |
||||
}, |
||||
// mounted() { |
||||
|
||||
// this.initGraph(this.testGraph); |
||||
|
||||
// }, |
||||
methods: { |
||||
getGraphData(){ |
||||
var _this = this |
||||
this.axios.get("person/"+'Rob Reiner') |
||||
// this.axios.get("person/all") |
||||
.then(function (response: { data: any; }) { |
||||
console.log(response) |
||||
_this.testGraph["nodes"] = [response.data] |
||||
_this.initGraph(_this.testGraph) |
||||
}) |
||||
.catch(function (error: any) { |
||||
console.log(error) |
||||
}) |
||||
}, |
||||
|
||||
initGraph(data: { |
||||
nodes: { id: string; group: number; }[]; links: { // import { onMounted } from 'vue'; |
||||
source: string; target: string; value: number; |
||||
}[]; |
||||
}) { |
||||
const _this = this; |
||||
|
||||
|
||||
const links = data.links; |
||||
const nodes = data.nodes; |
||||
|
||||
|
||||
const simulation = d3.forceSimulation(nodes) |
||||
.force("link", d3.forceLink(links).id((d: { id: any; }) => d.id)) |
||||
|
||||
.force("collide", d3.forceCollide().radius(() => 40)) |
||||
.force("charge", d3.forceManyBody().strength(30)) |
||||
.force("center", d3.forceCenter(_this.width / 2, _this.height / 2)); |
||||
|
||||
|
||||
|
||||
const svg = d3.select(".container") |
||||
.append("svg") |
||||
.attr("viewBox", `0 0 ${_this.width} ${_this.height}`) |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 初始化阶段之外单独创建线性渐变 |
||||
const defs = svg.append("defs"); |
||||
|
||||
// 在 initGraph 方法中，为每条链接创建线性渐变 |
||||
for (let i = 0; i < links.length; i++) { |
||||
const linearGradient = defs.append("linearGradient") |
||||
.attr("id", `line-gradient-${i}`) |
||||
.attr("x1", "0%") |
||||
.attr("y1", "0%") |
||||
.attr("x2", "100%") |
||||
.attr("y2", "100%"); |
||||
|
||||
linearGradient.append("stop") |
||||
.attr("offset", "0%") |
||||
.attr("stop-color", "#6C9DFC"); |
||||
|
||||
linearGradient.append("stop") |
||||
.attr("offset", "50%") |
||||
.attr("stop-color", "#9BAAFA"); |
||||
|
||||
linearGradient.append("stop") |
||||
.attr("offset", "100%") |
||||
.attr("stop-color", "#F3B1BC"); |
||||
} |
||||
const g = svg.append("g") |
||||
// 线段 |
||||
const link = g.append("g") |
||||
.attr("stroke-opacity", 0.6) |
||||
.selectAll("line") |
||||
.data(links) |
||||
.join("line") |
||||
.style("stroke", (_d: any, i: any) => `url(#line-gradient-${i})`) // 使用线性渐变设置描边颜色 |
||||
.style("stroke-width", (d: { value: number; }) => Math.sqrt(d.value)) |
||||
.attr("class", "link") |
||||
.attr("marker-end", "url(#arrow)"); |
||||
|
||||
|
||||
// // 创建箭头 |
||||
// const marker = defs.append("marker") |
||||
// .attr("id", "arrow") |
||||
// .attr("viewBox", "0 -5 10 10") |
||||
// .attr("refX", 31) |
||||
// .attr("refY", 0) |
||||
// .attr("markerWidth", 6) |
||||
// .attr("markerHeight", 6) |
||||
// .attr("orient", "auto") |
||||
// .append("path") |
||||
// .attr("d", "M0,-5L10,0L0,5") |
||||
// .attr("fill", "#E0AAED"); |
||||
|
||||
|
||||
|
||||
svg.call(d3.zoom().on("zoom", function () { |
||||
g.attr("transform", d3.event.transform) |
||||
})) |
||||
|
||||
|
||||
|
||||
// 设置节点之间的距离 |
||||
const linkForce = d3.forceLink(links) |
||||
.id((d: { id: any; }) => d.id) |
||||
.distance(100); // 设置节点之间的距离 |
||||
|
||||
simulation.force("link", linkForce); |
||||
|
||||
//小球的可视化范围的修改 |
||||
|
||||
const node = g.append("g") |
||||
.selectAll("circle") |
||||
.data(nodes) |
||||
.join("circle") |
||||
.attr("r", 15) |
||||
.attr("class", "node") |
||||
.attr("fill", (d: { id: any; }) => { |
||||
return `url(#node-gradient-${d.id})`; |
||||
}) |
||||
// .attr("fill", _this.color) |
||||
.on("click", _this.queryTest) |
||||
.call(_this.drag(simulation)); |
||||
|
||||
// 在 initGraph 方法中为每个小球创建线性渐变 |
||||
for (let i = 0; i < nodes.length; i++) { |
||||
const linearGradient = defs.append("linearGradient") |
||||
.attr("id", `node-gradient-${nodes[i].id}`) |
||||
.attr("x1", "0%") |
||||
.attr("y1", "0%") |
||||
.attr("x2", "0%") |
||||
.attr("y2", "100%"); |
||||
|
||||
linearGradient.append("stop") |
||||
.attr("offset", "0%") |
||||
.attr("stop-color", _this.colorList[nodes[i].group]); |
||||
|
||||
linearGradient.append("stop") |
||||
.attr("offset", "100%") |
||||
.attr("stop-color", "#9BBCFC"); |
||||
} |
||||
|
||||
node.append("title") |
||||
.text((d: { id: any; }) => d.id); |
||||
|
||||
const nodeNameText = g.append("g") |
||||
.selectAll("text") |
||||
.data(nodes) |
||||
.join("text") |
||||
.text(function (d: { id: any; }) { |
||||
return d.id |
||||
}) |
||||
.attr("fill", "white") |
||||
// .attr("dx", function () { |
||||
// return this.getBoundingClientRect().width / 2 * (-1) |
||||
// }) |
||||
.attr('x', (d: { x: any; }) => d.x) |
||||
.attr("y", 50) |
||||
.attr('text-anchor', 'middle') |
||||
.attr('alignment-baseline', 'middle') |
||||
.attr("class", "node-name") |
||||
.style('pointer-events', 'none') |
||||
.style('font-size', '15px') |
||||
.style('font-family', 'Arial') |
||||
.style('text-shadow', '1px 1px 1px #0052FF') |
||||
|
||||
|
||||
|
||||
node.on("mouseover", function (_d: any, _i: any) { |
||||
d3.select(this) |
||||
.attr("stroke", "white") // 添加白色边框 |
||||
.attr("stroke-width", 5); // 设置边框宽度 |
||||
}) |
||||
.on("mouseout", function (_d: any, _i: any) { |
||||
d3.select(this) |
||||
.attr("stroke", "none"); // 移出时恢复原始样式 |
||||
}); |
||||
|
||||
|
||||
simulation.on("tick", () => { |
||||
link |
||||
.attr("x1", (d: { source: { x: any; }; }) => d.source.x) |
||||
.attr("y1", (d: { source: { y: any; }; }) => d.source.y) |
||||
.attr("x2", (d: { target: { x: any; }; }) => d.target.x) |
||||
.attr("y2", (d: { target: { y: any; }; }) => d.target.y); |
||||
|
||||
node |
||||
.attr("cx", (d: { x: any; }) => d.x) |
||||
.attr("cy", (d: { y: any; }) => d.y); |
||||
|
||||
nodeNameText |
||||
.attr("x", (d: { x: any; }) => d.x) |
||||
.attr("y", (d: { y: any; }) => d.y); |
||||
|
||||
}); |
||||
}, |
||||
updateGraph(data: { links: any[]; }) { |
||||
// var _this = this |
||||
const links = data.links.map((d: object | null) => Object.create(d)); |
||||
const nodes = data.nodes.map((d: object | null) => Object.create(d)); |
||||
}, |
||||
color(d: { group: string | number; }) { |
||||
return this.colorList[d.group] |
||||
// const scale = d3.scaleOrdinal(d3.schemeCategory10); |
||||
// return (d: { group: any; }) => scale(d.group); |
||||
}, |
||||
drag(simulation: { alphaTarget: (arg0: number) => { (): any; new(): any; restart: { (): void; new(): any; }; }; }) { |
||||
function dragstarted(event: { active: any; }) { |
||||
if (!event.active) simulation.alphaTarget(0.3).restart(); |
||||
d3.event.subject.fx = d3.event.x; |
||||
d3.event.subject.fy = d3.event.y; |
||||
} |
||||
|
||||
function dragged(_event: any) { |
||||
d3.event.subject.fx = d3.event.x; |
||||
d3.event.subject.fy = d3.event.y; |
||||
} |
||||
|
||||
function dragended(event: { active: any; }) { |
||||
if (!event.active) simulation.alphaTarget(0); |
||||
d3.event.subject.fx = null; |
||||
d3.event.subject.fy = null; |
||||
} |
||||
|
||||
return d3.drag() |
||||
.on("start", dragstarted) |
||||
.on("drag", dragged) |
||||
.on("end", dragended); |
||||
}, |
||||
queryTest(d: { id: any; }) { |
||||
// var _this = this |
||||
console.log(d.id) |
||||
} |
||||
|
||||
}, |
||||
setup() { |
||||
const router = useRouter(); |
||||
|
||||
const goBack = () => { |
||||
router.go(-1); |
||||
}; |
||||
|
||||
return { |
||||
goBack |
||||
}; |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
// d3 |
||||
.container { |
||||
// width: 1000px; |
||||
// height: 950px; |
||||
// border: 1px solid #2c3e50; |
||||
// border-radius: 8px; |
||||
// margin-top: 40px; |
||||
// margin-left: auto; |
||||
// border-radius: 90%; |
||||
// margin-right: auto; |
||||
|
||||
border: 1px solid #CFD9EA; |
||||
background: linear-gradient(#d5e1f6, #a9c6ff, #d5e1f6); |
||||
background-image: url('/src/assets/images/106.jpg'); |
||||
// background-size: 100% 80%; |
||||
background-size: 100% ; |
||||
|
||||
background-attachment: fixed; |
||||
// border-radius: 50%; // 左下、右下圆角处理 |
||||
// background-color: rgba(0, 0, 0, 0); /* 50% 的透明度 */ |
||||
|
||||
} |
||||
.goto { |
||||
width: 4.5%; |
||||
height: 3.4%; |
||||
background-color: rgb(255, 255, 255,0.5); |
||||
// background-image: url('/src/assets/images/screen (1).png'); |
||||
// background-size: 100% 100%; |
||||
border-radius: 8px; |
||||
position: absolute; |
||||
top: 5%; |
||||
margin-left: 94%; |
||||
z-index: 5; |
||||
cursor: pointer; |
||||
} |
||||
.goto p{ |
||||
text-align: center; |
||||
color: #ffffff; |
||||
line-height: 30px; |
||||
font-size: 14px; |
||||
} |
||||
// .goto :hover{ |
||||
// background-color: #a2abbb; |
||||
// border-radius: 8px; |
||||
// width: 4.5%; |
||||
// height: 3.4%; |
||||
// } |
||||
|
||||
</style> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue