hui
1 year 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