You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
252 lines
7.3 KiB
252 lines
7.3 KiB
<template>
|
|
<div class="compBox">
|
|
<div id="container" class="compCon" ref="canvas">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Graph, Node, Point } from '@antv/x6'
|
|
|
|
export default {
|
|
name: 'sensors',
|
|
data(){
|
|
return {
|
|
graph:null
|
|
}
|
|
},
|
|
components: {
|
|
},
|
|
mounted(){
|
|
this.refresh();
|
|
window.addEventListener("resize",
|
|
_.debounce(this.refresh.bind(this), 1000)
|
|
)
|
|
},
|
|
methods: {
|
|
refresh(){
|
|
let _this = this;
|
|
this.$nextTick(() => {
|
|
_this.initGraph(_this.$refs["canvas"].offsetHeight);
|
|
})
|
|
},
|
|
initGraph(canvasHeight){
|
|
|
|
let unitH = 42;
|
|
|
|
let average = unitH + (canvasHeight - unitH*13)/12;
|
|
Graph.registerNode(
|
|
'sensor',
|
|
{
|
|
width: 180,
|
|
height: unitH,
|
|
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,
|
|
)
|
|
if(this.graph){
|
|
this.graph.clearCells();
|
|
this.graph = null;
|
|
}
|
|
|
|
this.graph = new Graph({
|
|
container: document.getElementById('container'),
|
|
autoResize: true,
|
|
grid: false,
|
|
panning: false,
|
|
mousewheel: false,
|
|
interacting: {
|
|
nodeMovable: false,
|
|
edgeMovable: false
|
|
},
|
|
connecting: {
|
|
anchor: 'orth',
|
|
},
|
|
})
|
|
|
|
|
|
const createSub = (x, y, title) => {
|
|
return this.graph.addNode({
|
|
x,
|
|
y,
|
|
shape: 'sensor',
|
|
attrs: {
|
|
title: {
|
|
text: title,
|
|
wordSpacing: '-5px',
|
|
letterSpacing: 0,
|
|
fontSize: 13,
|
|
fontFamily: 'Arial',
|
|
letterSpacing: 0,
|
|
}
|
|
},
|
|
})
|
|
}
|
|
|
|
const link = (source, target, vertices) => {
|
|
return this.graph.addEdge({
|
|
source: {
|
|
cell: source,
|
|
anchor: {
|
|
name: 'center',
|
|
args: {
|
|
dx: 0,
|
|
},
|
|
},
|
|
},
|
|
target: {
|
|
cell: target,
|
|
anchor: {
|
|
name: 'right'
|
|
},
|
|
},
|
|
shape: 'dashed',
|
|
})
|
|
}
|
|
|
|
const main = this.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 * average, 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,
|
|
// },
|
|
// ])
|
|
|
|
// this.graph.zoomToFit({ padding: 0, maxScale: 1, mainScale: 1 })
|
|
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.compBox{
|
|
.compCon{ width:100%; height: 100%;}
|
|
}
|
|
</style>
|
|
|