vue+ramda+snap.svg实现一个流程图效果代码
代码语言:html
所属分类:图表
代码描述:vue+ramda+snap.svg实现一个流程图效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ramda.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/snap.svg-min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script> <script> var __ = R.__ </script> <style> @charset "utf-8"; /* CSS Document */ body { font-family: "microsoft yahei", "simhei", "simsun";padding: 20px; } ul, li { list-style: none; margin: 0px; padding: 0 } * { padding: 0; margin: 0 } #app { margin: auto; } .el-col { border: solid 1px #1890FF; } .board { position: relative; overflow: hidden; width: 800px; height: 400px; } .node { width: 200px; height: 100px; border: 1px solid #1890FF; position: absolute; background: #fff; z-index: 100; left: 0; top: 0; border-radius: 4px } .symbol { width: 30px; height: 30px; border: solid 1px #1890FF; background: #1890FF; position: absolute; z-index: 10; line-height: 30px; color: #f00; text-align: center; border-radius: 50px; color: #fff } .board > svg { width: 100%; height: 100%; } .tit { background: #1890FF; position: absolute; bottom: 0; width: 100%; text-align: center; color: #fff; padding: 3px 0; font-size: 14px; } .board > line { border: solid 1px #1890FF; } .text { font-size: 14px; padding: 0 10px } .tree_ico_list{ width: 100%; display: flex; justify-content:flex-end; margin: 5px 0 10px} .tree_ico_list img{ margin: 0 2px} </style> </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="//repo.bfw.wiki/bfwrepo/images/xring/tree-ico.png" /></li> <li><img src="//repo.bfw.wiki/bfwrepo/images/xring/tree-ico1.png" /></li> <li><img src="//repo.bfw.wiki/bfwrepo/images/xring/tree-ico2.png" /></li> <li><img src="//repo.bfw.wiki/bfwrepo/images/xring/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, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0