JayChou
3 months ago
parent
d8550d2564
commit
68af92d3a8
9 changed files with 771 additions and 41 deletions
@ -0,0 +1,3 @@ |
|||||||
|
export interface GetCourseObjectivesList { |
||||||
|
id:string | number |
||||||
|
} |
||||||
@ -0,0 +1,358 @@ |
|||||||
|
<template> |
||||||
|
<div id="mountNode"></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { onMounted } from 'vue' |
||||||
|
onMounted(() => { |
||||||
|
/** |
||||||
|
* 该示例演示自定义边和节点实现资金流转图效果 |
||||||
|
* by 十吾 |
||||||
|
*/ |
||||||
|
var colorMap = { |
||||||
|
凭证开立: '#72CC4A', |
||||||
|
凭证转让: '#1A91FF', |
||||||
|
凭证融资: '#FFAA15', |
||||||
|
第一阶段: '#72CC4A', |
||||||
|
第二阶段: '#1A91FF', |
||||||
|
第三阶段: '#FFAA15', |
||||||
|
} |
||||||
|
var data = { |
||||||
|
nodes: [ |
||||||
|
{ |
||||||
|
id: '1', |
||||||
|
label: '前端', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '2', |
||||||
|
label: 'HTML&CSS&Javascript', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '3', |
||||||
|
label: 'HTML&CSS&Javascript', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '4', |
||||||
|
label: 'React.js', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '5', |
||||||
|
label: 'Vue.js', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '6', |
||||||
|
label: '工程化脚手架', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '7', |
||||||
|
label: '工程化脚手架', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '8', |
||||||
|
label: 'HTML&CSS&Javascript', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '9', |
||||||
|
label: 'HTML&CSS&Javascript', |
||||||
|
}, |
||||||
|
], |
||||||
|
edges: [ |
||||||
|
{ |
||||||
|
source: '1', |
||||||
|
target: '2', |
||||||
|
data: { |
||||||
|
type: '第一阶段', |
||||||
|
amount: '10学时', |
||||||
|
date: '学习基础知识', |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
source: '1', |
||||||
|
target: '3', |
||||||
|
data: { |
||||||
|
type: '第一阶段', |
||||||
|
amount: '10学时', |
||||||
|
date: '学习基础知识', |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
source: '2', |
||||||
|
target: '5', |
||||||
|
data: { |
||||||
|
type: '第二阶段', |
||||||
|
amount: '15学时', |
||||||
|
date: '学习Vue框架', |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
source: '5', |
||||||
|
target: '6', |
||||||
|
data: { |
||||||
|
type: '第三阶段', |
||||||
|
amount: '8学时', |
||||||
|
date: '学习前端开发工程化', |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
source: '3', |
||||||
|
target: '4', |
||||||
|
data: { |
||||||
|
type: '第二阶段', |
||||||
|
amount: '18学时', |
||||||
|
date: '学习React.js', |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
source: '4', |
||||||
|
target: '7', |
||||||
|
data: { |
||||||
|
type: '第三阶段', |
||||||
|
amount: '8学时', |
||||||
|
date: '学习前端开发工程化', |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
source: '1', |
||||||
|
target: '8', |
||||||
|
data: { |
||||||
|
type: '第一阶段', |
||||||
|
amount: '10学时', |
||||||
|
date: '学习基础知识', |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
source: '1', |
||||||
|
target: '9', |
||||||
|
data: { |
||||||
|
type: '第一阶段', |
||||||
|
amount: '10学时', |
||||||
|
date: '学习基础知识', |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
} |
||||||
|
|
||||||
|
G6.registerNode( |
||||||
|
'round-rect', |
||||||
|
{ |
||||||
|
drawShape: function drawShape(cfg, group) { |
||||||
|
var width = cfg.style.width |
||||||
|
var stroke = cfg.style.stroke |
||||||
|
var rect = group.addShape('rect', { |
||||||
|
attrs: { |
||||||
|
x: -width / 2, |
||||||
|
y: -15, |
||||||
|
width: width, |
||||||
|
height: 30, |
||||||
|
radius: 15, |
||||||
|
stroke: stroke, |
||||||
|
lineWidth: 1.2, |
||||||
|
fillOpacity: 1, |
||||||
|
}, |
||||||
|
}) |
||||||
|
var circleLeft = group.addShape('circle', { |
||||||
|
attrs: { |
||||||
|
x: -width / 2, |
||||||
|
y: 0, |
||||||
|
r: 3, |
||||||
|
fill: stroke, |
||||||
|
}, |
||||||
|
}) |
||||||
|
var circleRight = group.addShape('circle', { |
||||||
|
attrs: { |
||||||
|
x: width / 2, |
||||||
|
y: 0, |
||||||
|
r: 3, |
||||||
|
fill: stroke, |
||||||
|
}, |
||||||
|
}) |
||||||
|
return rect |
||||||
|
}, |
||||||
|
getAnchorPoints: function getAnchorPoints() { |
||||||
|
return [ |
||||||
|
[0, 0.5], |
||||||
|
[1, 0.5], |
||||||
|
] |
||||||
|
}, |
||||||
|
update: function update(cfg, item) { |
||||||
|
var group = item.getContainer() |
||||||
|
var children = group.get('children') |
||||||
|
var node = children[0] |
||||||
|
var circleLeft = children[1] |
||||||
|
var circleRight = children[2] |
||||||
|
|
||||||
|
var stroke = cfg.style.stroke, |
||||||
|
labelStyle = cfg.labelStyle |
||||||
|
|
||||||
|
if (stroke) { |
||||||
|
node.attr('stroke', stroke) |
||||||
|
circleLeft.attr('fill', stroke) |
||||||
|
circleRight.attr('fill', stroke) |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
'single-shape', |
||||||
|
) |
||||||
|
|
||||||
|
G6.registerEdge('polyline', { |
||||||
|
itemType: 'edge', |
||||||
|
draw: function draw(cfg, group) { |
||||||
|
var startPoint = cfg.startPoint |
||||||
|
var endPoint = cfg.endPoint |
||||||
|
var centerPoint = { |
||||||
|
x: (startPoint.x + endPoint.x) / 2, |
||||||
|
y: (startPoint.y + endPoint.y) / 2, |
||||||
|
} |
||||||
|
|
||||||
|
var Ydiff = endPoint.y - startPoint.y |
||||||
|
|
||||||
|
var slope = Ydiff !== 0 ? 500 / Math.abs(Ydiff) : 0 |
||||||
|
|
||||||
|
var cpOffset = 16 |
||||||
|
var offset = Ydiff < 0 ? cpOffset : -cpOffset |
||||||
|
|
||||||
|
var line1EndPoint = { |
||||||
|
x: startPoint.x + slope, |
||||||
|
y: endPoint.y + offset, |
||||||
|
} |
||||||
|
var line2StartPoint = { |
||||||
|
x: line1EndPoint.x + cpOffset, |
||||||
|
y: endPoint.y, |
||||||
|
} |
||||||
|
|
||||||
|
// 控制点坐标 |
||||||
|
var controlPoint = { |
||||||
|
x: |
||||||
|
((line1EndPoint.x - startPoint.x) * (endPoint.y - startPoint.y)) / |
||||||
|
(line1EndPoint.y - startPoint.y) + |
||||||
|
startPoint.x, |
||||||
|
y: endPoint.y, |
||||||
|
} |
||||||
|
|
||||||
|
var path = [ |
||||||
|
['M', startPoint.x, startPoint.y], |
||||||
|
['L', line1EndPoint.x, line1EndPoint.y], |
||||||
|
[ |
||||||
|
'Q', |
||||||
|
controlPoint.x, |
||||||
|
controlPoint.y, |
||||||
|
line2StartPoint.x, |
||||||
|
line2StartPoint.y, |
||||||
|
], |
||||||
|
['L', endPoint.x, endPoint.y], |
||||||
|
] |
||||||
|
|
||||||
|
if (Ydiff === 0) { |
||||||
|
path = [ |
||||||
|
['M', startPoint.x, startPoint.y], |
||||||
|
['L', endPoint.x, endPoint.y], |
||||||
|
] |
||||||
|
} |
||||||
|
|
||||||
|
var line = group.addShape('path', { |
||||||
|
attrs: { |
||||||
|
path: path, |
||||||
|
stroke: colorMap[cfg.data.type], |
||||||
|
lineWidth: 1.2, |
||||||
|
endArrow: false, |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
var labelLeftOffset = 8 |
||||||
|
var labelTopOffset = 8 |
||||||
|
// amount |
||||||
|
var amount = group.addShape('text', { |
||||||
|
attrs: { |
||||||
|
text: cfg.data.amount, |
||||||
|
x: line2StartPoint.x + labelLeftOffset, |
||||||
|
y: endPoint.y - labelTopOffset - 2, |
||||||
|
fontSize: 14, |
||||||
|
textAlign: 'left', |
||||||
|
textBaseline: 'middle', |
||||||
|
fill: '#000000D9', |
||||||
|
}, |
||||||
|
}) |
||||||
|
// type |
||||||
|
var type = group.addShape('text', { |
||||||
|
attrs: { |
||||||
|
text: cfg.data.type, |
||||||
|
x: line2StartPoint.x + labelLeftOffset, |
||||||
|
y: endPoint.y - labelTopOffset - amount.getBBox().height - 2, |
||||||
|
fontSize: 10, |
||||||
|
textAlign: 'left', |
||||||
|
textBaseline: 'middle', |
||||||
|
fill: '#000000D9', |
||||||
|
}, |
||||||
|
}) |
||||||
|
// date |
||||||
|
var date = group.addShape('text', { |
||||||
|
attrs: { |
||||||
|
text: cfg.data.date, |
||||||
|
x: line2StartPoint.x + labelLeftOffset, |
||||||
|
y: endPoint.y + labelTopOffset + 4, |
||||||
|
fontSize: 12, |
||||||
|
fontWeight: 300, |
||||||
|
textAlign: 'left', |
||||||
|
textBaseline: 'middle', |
||||||
|
fill: '#000000D9', |
||||||
|
}, |
||||||
|
}) |
||||||
|
return line |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
var graph = new G6.Graph({ |
||||||
|
container: 'mountNode', |
||||||
|
width: window.innerWidth - 19, |
||||||
|
height: 600, |
||||||
|
layout: { |
||||||
|
type: 'dagre', |
||||||
|
rankdir: 'LR', |
||||||
|
nodesep: 30, |
||||||
|
ranksep: 100, |
||||||
|
}, |
||||||
|
modes: { |
||||||
|
default: ['drag-canvas'], |
||||||
|
}, |
||||||
|
defaultNode: { |
||||||
|
shape: 'round-rect', |
||||||
|
labelCfg: { |
||||||
|
style: { |
||||||
|
fill: '#000000A6', |
||||||
|
fontSize: 10, |
||||||
|
}, |
||||||
|
}, |
||||||
|
style: { |
||||||
|
stroke: '#72CC4A', |
||||||
|
width: 150, |
||||||
|
}, |
||||||
|
}, |
||||||
|
defaultEdge: { |
||||||
|
shape: 'polyline', |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
graph.data(data) |
||||||
|
graph.render() |
||||||
|
|
||||||
|
var edges = graph.getEdges() |
||||||
|
edges.forEach(function (edge:any) { |
||||||
|
var line = edge.getKeyShape() |
||||||
|
var stroke = line.attr('stroke') |
||||||
|
var targetNode = edge.getTarget() |
||||||
|
targetNode.update({ |
||||||
|
style: { |
||||||
|
stroke: stroke, |
||||||
|
}, |
||||||
|
}) |
||||||
|
}) |
||||||
|
graph.paint() |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
#mountNode { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,149 @@ |
|||||||
|
<template> |
||||||
|
<div class="path-title"> |
||||||
|
<div class="title">前端课程学习路径推荐</div> |
||||||
|
<div class="setting"> |
||||||
|
<el-select |
||||||
|
v-model="courseName" |
||||||
|
placeholder="请选择课程" |
||||||
|
size="large" |
||||||
|
style="width: 200px" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in options" |
||||||
|
:key="item.id" |
||||||
|
:label="item.label" |
||||||
|
:value="item.id" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
<el-button type="primary" style="margin-left: 20px">切换</el-button> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
style="margin-left: 20px" |
||||||
|
@click="Router.push('/')" |
||||||
|
> |
||||||
|
返回课程首页 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="path-container"> |
||||||
|
<mountNode /> |
||||||
|
</div> |
||||||
|
<div class="statistics"> |
||||||
|
<div class="title">学习路径</div> |
||||||
|
|
||||||
|
<el-card style="margin-top: 50px"> |
||||||
|
<el-table :data="tableData" border style="width: 100%"> |
||||||
|
<el-table-column type="index" label="序号" width="100px" /> |
||||||
|
<el-table-column prop="content" label="学习路径"> |
||||||
|
<template v-slot="{ row }"> |
||||||
|
<div> |
||||||
|
<el-tag |
||||||
|
style="margin-right: 10px" |
||||||
|
type="primary" |
||||||
|
v-for="(item, index) in row.content" |
||||||
|
:key="index" |
||||||
|
> |
||||||
|
{{ item }} |
||||||
|
</el-tag> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="num" label="数量" width="100px" /> |
||||||
|
<el-table-column prop="hours" label="学时" width="100px" /> |
||||||
|
</el-table> |
||||||
|
<div class="path-description"> |
||||||
|
前端课程主要分为四个分支，每个分支包含很多知识点，其中分为三个阶段在每个阶段有不同的知识点，在学习后继知识点需要学习前置知识点 |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { ref } from 'vue' |
||||||
|
import mountNode from './components/mountNode.vue' |
||||||
|
import { useRouter } from 'vue-router' |
||||||
|
const Router = useRouter() |
||||||
|
const courseName = ref('') |
||||||
|
const options = [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
label: 'Vue.js', |
||||||
|
}, |
||||||
|
] |
||||||
|
const tableData = [ |
||||||
|
{ |
||||||
|
content: ['HTML', ' CSS', 'JavaScript', 'Node.js', 'Vue.js', 'React.js'], |
||||||
|
num: 10, |
||||||
|
hours: 7.5, |
||||||
|
}, |
||||||
|
{ |
||||||
|
content: ['HTML', ' CSS', 'JavaScript', 'Node.js', 'Vue.js', 'React.js'], |
||||||
|
num: 10, |
||||||
|
hours: 7.5, |
||||||
|
}, |
||||||
|
{ |
||||||
|
content: ['HTML', ' CSS', 'JavaScript', 'Node.js', 'Vue.js', 'React.js'], |
||||||
|
num: 10, |
||||||
|
hours: 7.5, |
||||||
|
}, |
||||||
|
{ |
||||||
|
content: ['HTML', ' CSS', 'JavaScript', 'Node.js', 'Vue.js', 'React.js'], |
||||||
|
num: 10, |
||||||
|
hours: 7.5, |
||||||
|
}, |
||||||
|
{ |
||||||
|
content: ['HTML', ' CSS', 'JavaScript', 'Node.js', 'Vue.js', 'React.js'], |
||||||
|
num: 10, |
||||||
|
hours: 7.5, |
||||||
|
}, |
||||||
|
] |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.path-container { |
||||||
|
width: 100%; |
||||||
|
height: 600px; |
||||||
|
background-color: #f5f6fd; |
||||||
|
} |
||||||
|
.path-title { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 50px; |
||||||
|
// background-color: skyblue; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
.title { |
||||||
|
font-size: 18px; |
||||||
|
height: 100%; |
||||||
|
line-height: 50px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.setting { |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
top: 50%; |
||||||
|
|
||||||
|
transform: translate(50%, -50%); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
} |
||||||
|
.statistics { |
||||||
|
width: 100%; |
||||||
|
margin-top: 50px; |
||||||
|
padding: 0 30px 30px 30px; |
||||||
|
.title { |
||||||
|
font-size: 32px; |
||||||
|
font-weight: 600; |
||||||
|
text-align: center; |
||||||
|
// margin: 30px 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.path-description{ |
||||||
|
// padding: 20px 30px; |
||||||
|
margin: 30px 0; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue