<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue.js项目评估流程图特效 - 更多源码WW.96flw.COM</title>
<script src="js/ramda.min.js"></script>
<script src="js/snap.svg-min.js"></script>
<script src="js/vue.min.js"></script>
<script>var __ = R.__ </script>
<link href="style/tree.css" rel="stylesheet">
</head>
<body>
<div id="board" class="board" :style="board">
<svg ref="svg"></svg>
<div class="node" v-for="node in nodes" :style="position(node)" @click="handleNode(node)">
<!-- 示例 -->
<ul class="tree_ico_list">
<li><img src="img/tree-ico.png" /></li>
<li><img src="img/tree-ico1.png" /></li>
<li><img src="img/tree-ico2.png" /></li>
<li><img src="img/tree-ico3.png" /></li>
</ul>
<p class="text">{{ node.text }}</p>
<div class="tit">{{ node.title }}</div>
</div>
<div class="symbol" v-for="symbol in symbols" :style="positionSymbol(symbol)" @click="handleSymbol(symbol)">
{{ symbol.title }}
</div>
</div>
<script>
const nodeWidth = 150 //节点宽度
const nodeHeight = 100 //节点高度
const colWidth = 200 //列宽
const rowHeight = 200 //行高
const symbolSide = 30 //符号边长
// 获取起止点坐标
function points (n1, n2) {
if (n2.col > n1.col) {
return [rightMiddle(n1), leftMiddle(n2)]
} else if (n2.col < n1.col){
return [leftMiddle(n1), rightMiddle(n2)]
} else if (n2.row > n1.row){
return [bottomMiddle(n1), topMiddle(n2)]
} else {
return [topMiddle(n1), bottomMiddle(n2)]
}
}
function rightMiddle (node) {
return [node.col * colWidth + nodeWidth, node.row * rowHeight + nodeHeight / 2]
}
function leftMiddle (node) {
return [node.col * colWidth, node.row * rowHeight + nodeHeight / 2]
}
function bottomMiddle (node) {
return [node.col * colWidth + nodeWidth / 2, node.row * rowHeight + nodeHeight]
}
function topMiddle (node) {
return [node.col * colWidth + nodeWidth / 2, node.row * rowHeight]
}
new Vue({
el: '#board',
data: {
name: 'soni',
nodes: [
{
id: 1,
col: 0,
row: 0,
title: '代用名',
text: '1 手术评估'
},
{
id: 2,
col: 1,
row: 1,
title: '代用名'
},
{
id: 3,
col: 1,
row: 2,
title: '代用名'
},
{
id: 4,
col: 2,
row: 1,
title: '代用名'
},
{
id: 5,
col: 1,
row: 3,
title: '代用名'
},
{
id: 6,
col: 2,
row: 0,
title: '代用名'
}
],
lines: [
{
source: 1, //指向节点id
target: 2,
symbols: [
{ title: 'Y' }
]
},
{
source: 1,
target: 3
},
{
source: 3,
target: 4
},
{
source: 3,
target: 5,
symbols: [
{ title: 'N' }
]
},
{
source: 4,
target: 6
}
],
symbols: []
},
computed: {
board () {
const rows = R.reduce((rows, node) => R.max(rows, node.row), 0, this.nodes) + 1
return {
height: rows * rowHeight + 'px'
}
}
},
methods: {
handleNode (node) {
alert(JSON.stringify(node))
},
handleSymbol (node) {
alert(JSON.stringify(node))
},
position (item) {
return {
left: item.col * colWidth + 'px',
top: item.row * rowHeight + 'px',
width: nodeWidth + 'px',
height: nodeHeight + 'px'
}
},
linePath (line) {
const sourceNode = R.find(R.propEq('id', line.source), this.nodes)
const targetNode = R.find(R.propEq('id', line.target), this.nodes)
const [start, end] = points(sourceNode, targetNode)
const middle = start[0] + (end[0] - start[0]) / 2
return [
[start[0], start[1], middle, start[1]],
[middle, start[1], middle, end[1]],
[middle, end[1], end[0], end[1]]
]
},
createSymbol (symbol, line) {
const cy = line[1] + (line[3] - line[1]) / 2
const cx = line[0]
return Object.assign({
position: {
left: cx - symbolSide / 2 + 'px',
top: cy - symbolSide / 2 + 'px'
}
}, symbol)
},
positionSymbol (symbol) {
return symbol.position
}
},
mounted () {
var paper = Snap(this.$refs.svg)
R.forEach(line => {
const paths = this.linePath(line)
R.forEach(([x1, y1, x2, y2]) => {
const line = paper.line(x1, y1, x2, y2)
line.attr({
stroke: "#000",
strokeWidth: 1
})
}, paths)
const endPoint = paper.circle(paths[2][2], paths[2][3], 5)
endPoint.attr({
fill: "#bada55",
stroke: "#000",
strokeWidth: 1
})
const symbols = line.symbols || []
R.forEach(symbol => {
this.symbols.push(this.createSymbol(symbol, paths[1]))
}, symbols)
}, this.lines)
}
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：Chrome、FireFox、360、搜狗、Opera、傲游. 不支持Windows版Safari、IE8及以下浏览器。</p>
<p>更多源码：<a href="http://WW.96flw.COM/" target="_blank">尽在WW.96flw.COM</a></p>
</div>
</body>
</html>
vue.js项目评估流程图特效.zip
版权申诉
63 浏览量
2023-10-09
23:52:23
上传
评论
收藏 74KB ZIP 举报
vue.js项目评估流程图特效.zip （9个子文件） 
jiaoben7965 js 
ramda.min.js 45KB snap.svg-min.js 80KB vue.min.js 75KB style tree.css 1KB img 
tree-ico3.png 355B tree-ico2.png 581B tree-ico.png 223B tree-ico1.png 311B
index.html 5KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5851
最新资源
- 基于多种编程语言的Jugg后台管理系统设计源码
- java进销存管理系统（jsp+mssql）.rar
- tensorflow-2.9.3-cp310-cp310-win-amd64.whl
- tensorflow-2.9.2-cp310-cp310-win-amd64.whl
- 2000-2021年各地级市普通高等学校在校学生数数据.xls
- tensorflow-gpu-2.9.2-cp310-cp310-win-amd64.whl
- 2000-2021年各地级市人力资本水平数据（含原始数据+计算过程+计算结果）.xlsx
- WX小程序源码无后台weapp-360che-master
- 基于Android的水产养殖管理系统设计源码
- demo_LADRC_simulink.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
