hui
2 years ago
4 changed files with 389 additions and 21 deletions
@ -0,0 +1,67 @@ |
|||
<template> |
|||
<BackgroundClip class='BG-01' :clipPath="getClipPath" |
|||
:borderPath="getBorderPath" |
|||
bgColor="linear-gradient(180deg, #152E3CBB 0%, #163A45DD 100%)" |
|||
borderColor="linear-gradient(180deg, rgba(40, 144, 167, 1), rgba(40, 144, 167, 0.38), rgba(40, 144, 167, 1))"> |
|||
<slot /> |
|||
</BackgroundClip> |
|||
</template> |
|||
|
|||
<script> |
|||
import BackgroundClip from "./BackgroundClip.vue" |
|||
|
|||
export default { |
|||
name: 'BG-01', |
|||
components: { |
|||
BackgroundClip |
|||
}, |
|||
props: { |
|||
width: { |
|||
type: String, |
|||
default: "18px" |
|||
}, |
|||
borderW: { |
|||
type: String, |
|||
default: "1px" |
|||
} |
|||
}, |
|||
computed: { |
|||
getClipPath() { |
|||
return `polygon(${this.width} 0%, calc(100% - ${this.width}) 0%, 100% ${this.width}, 100% calc(100% - ${this.width}), calc(100% - ${this.width}) 100%, ${this.width} 100%, 0% calc(100% - ${this.width}), 0% ${this.width})` |
|||
}, |
|||
getBorderPath() { |
|||
let deltaX = `calc(${this.borderW} * ${Math.sqrt(2) - 1})`; |
|||
let deltaY = deltaX; |
|||
return `polygon( |
|||
50% 0%, |
|||
calc(100% - ${this.width}) 0%, |
|||
100% ${this.width}, |
|||
100% calc(100% - ${this.width}), |
|||
calc(100% - ${this.width}) 100%, |
|||
${this.width} 100%, |
|||
0% calc(100% - ${this.width}), |
|||
0 ${this.width}, |
|||
${this.width} 0, |
|||
51% 0, |
|||
|
|||
51% ${this.borderW}, |
|||
calc(${this.width} + ${deltaX}) ${this.borderW}, |
|||
${this.borderW} calc(${this.width} + ${deltaY}), |
|||
${this.borderW} calc(100% - ${this.width} - ${deltaX}), |
|||
calc(${this.width} + ${deltaX}) calc(100% - ${this.borderW}), |
|||
calc(100% - ${this.width} - ${deltaX}) calc(100% - ${this.borderW}), |
|||
calc(100% - ${this.borderW}) calc(100% - ${this.width} - ${deltaY}), |
|||
calc(100% - ${this.borderW}) calc(${this.width} + ${deltaY}), |
|||
calc(100% - ${this.width} - ${deltaX}) calc(${this.borderW}), |
|||
50% ${this.borderW}, |
|||
50% 0 |
|||
|
|||
)` |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.BG-01 {} |
|||
</style> |
|||
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,234 @@ |
|||
<template> |
|||
<div class="compBox"> |
|||
<div id="container" class="compCon"> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { Graph, Node, Point } from '@antv/x6' |
|||
|
|||
export default { |
|||
name: 'sensors', |
|||
data(){ |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
}, |
|||
mounted(){ |
|||
this.initGraph(); |
|||
}, |
|||
methods: { |
|||
initGraph(){ |
|||
|
|||
|
|||
|
|||
Graph.registerNode( |
|||
'sensor', |
|||
{ |
|||
width: 180, |
|||
height: 42, |
|||
markup: [ |
|||
{ |
|||
tagName: 'rect', |
|||
selector: 'box', |
|||
}, |
|||
{ |
|||
tagName: 'image', |
|||
selector: 'bg', |
|||
}, |
|||
{ |
|||
tagName: 'text', |
|||
selector: 'title', |
|||
}, |
|||
], |
|||
attrs: { |
|||
box: { |
|||
refWidth: '100%', |
|||
refHeight: '100%', |
|||
fill: 'transparent', |
|||
// stroke: '#5F95FF', |
|||
strokeWidth: 1, |
|||
rx: 0, |
|||
ry: 0, |
|||
pointerEvents: 'visiblePainted', |
|||
}, |
|||
avatar: { |
|||
width: 48, |
|||
height: 48, |
|||
refX: 8, |
|||
refY: 6, |
|||
}, |
|||
title: { |
|||
refWidth: '100%', |
|||
refHeight: '100%', |
|||
refX: "50%", |
|||
refY: "50%", |
|||
fill: '#fff', |
|||
"textAnchor": "middle", |
|||
"textVerticalAnchor": "middle", |
|||
fontFamily: 'Courier New', |
|||
fontSize: 15, |
|||
fontWeight: '800' |
|||
}, |
|||
bg: { |
|||
"xlink:href": require('./img/sensorItem.svg') |
|||
} |
|||
}, |
|||
}, |
|||
true, |
|||
) |
|||
|
|||
Graph.registerEdge( |
|||
'dashed', |
|||
{ |
|||
zIndex: -1, |
|||
attrs: { |
|||
line: { |
|||
strokeDasharray: 5, |
|||
fill: 'none', |
|||
strokeLinejoin: 'round', |
|||
strokeWidth: 1, |
|||
stroke: '#05D5F6', |
|||
sourceMarker: null, |
|||
targetMarker: null, |
|||
}, |
|||
}, |
|||
}, |
|||
true, |
|||
) |
|||
|
|||
const graph = new Graph({ |
|||
container: document.getElementById('container'), |
|||
autoResize: true, |
|||
grid: false, |
|||
panning: false, |
|||
mousewheel: false, |
|||
connecting: { |
|||
anchor: 'orth', |
|||
}, |
|||
}) |
|||
|
|||
|
|||
function createSub(x, y, title) { |
|||
return graph.addNode({ |
|||
x, |
|||
y, |
|||
shape: 'sensor', |
|||
attrs: { |
|||
title: { |
|||
text: title, |
|||
wordSpacing: '-5px', |
|||
letterSpacing: 0, |
|||
fontSize: 13, |
|||
fontFamily: 'Arial', |
|||
letterSpacing: 0, |
|||
} |
|||
}, |
|||
}) |
|||
} |
|||
|
|||
function link(source, target, vertices) { |
|||
return graph.addEdge({ |
|||
source: { |
|||
cell: source, |
|||
anchor: { |
|||
name: 'center', |
|||
args: { |
|||
dx: 0, |
|||
}, |
|||
}, |
|||
}, |
|||
target: { |
|||
cell: target, |
|||
anchor: { |
|||
name: 'right' |
|||
}, |
|||
}, |
|||
shape: 'dashed', |
|||
}) |
|||
} |
|||
|
|||
const main = graph.addNode({ |
|||
shape: 'circle', |
|||
x: 310, |
|||
y: 80, |
|||
width: 16, |
|||
height: 16, |
|||
attrs: { |
|||
body:{ |
|||
fill: "#05D5F6", |
|||
stroke: "#FFFFFF66" |
|||
} |
|||
} |
|||
}) |
|||
|
|||
let subItems = [ |
|||
"可变新消息标志", |
|||
"气象检测器", |
|||
"一类交通量调查站", |
|||
"枪机", |
|||
"球机", |
|||
"雷达", |
|||
"路段语音广播系统", |
|||
"疲劳唤醒系统", |
|||
"护栏碰撞预警系统", |
|||
"合流区预警系统", |
|||
"智能行车诱导系统", |
|||
"光纤在线监测系统", |
|||
"智慧锥桶" |
|||
] |
|||
|
|||
subItems.forEach((item, index) => { |
|||
let temp = createSub(0, index * 68, item); |
|||
link(main, temp); |
|||
}) |
|||
|
|||
// const sub01 = createSub(0, 0, '气象检测器') |
|||
// const sub02 = createSub(0, 100, '一类交通量调查站') |
|||
// const sub03 = createSub(0, 200, '可变新消息标志') |
|||
|
|||
// link(main, sub02, [ |
|||
// { |
|||
// x: 385, |
|||
// y: 180, |
|||
// }, |
|||
// ]) |
|||
// link(main, sub01, [ |
|||
// { |
|||
// x: 385, |
|||
// y: 180, |
|||
// }, |
|||
// { |
|||
// x: 175, |
|||
// y: 180, |
|||
// }, |
|||
// ]) |
|||
// link(main, sub03, [ |
|||
// { |
|||
// x: 385, |
|||
// y: 180, |
|||
// }, |
|||
// { |
|||
// x: 585, |
|||
// y: 180, |
|||
// }, |
|||
// ]) |
|||
|
|||
// graph.zoomToFit({ padding: 0, maxScale: 1, mainScale: 1 }) |
|||
|
|||
|
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.compBox{ |
|||
.compCon{ width:100%; height: 100%;} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue