实现效果 
实现方式： echarts关系图graph结合webSocker或心跳请求API接口通过canvas实时绘制目前AGV所处节点信息；
业务背景： 客户需求不刷新页面的情况下，实时显示AGV目前所处节点和工作状态信息，图中蓝色部分既是AGV目前所处节点位置 Node2 Node3文字可替换为后台返回状态描述等；
撸码搬砖
<template>
> <div id="middle2">
<div id="iomsMap" style="width:100%;height:100%;"></div>
</div>
</template>
<script>
import { MaintenanceTaskCurStep } from '@/api/modular/main/IOMS/taskScreenManage'
import * as echarts from 'echarts'
export default {
name: 'Middle2',
data() {
return {}
},
created() {
setTimeout(() => {
this.loadData()
setInterval(() => {
this.loadData()
}, 3000)
}, 200)
},
methods: {
loadData() {
var chartDom = document.getElementById('iomsMap');
var myChart = echarts.init(chartDom);
var option;
// MaintenanceTaskCurStep({}).then((res) => {
let curStep = ''
// if (res.data && res.data.length > 0) {
// res.data.forEach((item) => {
// let stepStr = this.scheduleStepFilter(item.stepName)
// let statusStr = this.actionCompleteStatusFilter(item.actionCompleteStatus)
// let executeObjectType = this.executeObjectTypeFilter(item.executeObjectType)
// console.log(stepStr,statusStr,executeObjectType)
// if (statusStr == '执行中') {
// if (stepStr == '检查是否允许放料' || stepStr == '检查放下服务器') {
// stepStr = '放下服务器'
// }
// if (stepStr == '检查是否允许取料' || stepStr == '检查抓起服务器') {
// stepStr = '抓起服务器'
// }
// curStep = stepStr
// }
// })
// }else{
// curStep = ""
// }
//静态测试数据----curStep为高亮显示的模块
curStep = '放下服务器';
// curStep = '抓起服务器';
console.log(curStep)
option = {
title: {
text: '',
textStyle: {
color: "white"
}
},
tooltip: { show: false },
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
layout: 'none',
symbol: 'roundRect',
symbolSize: [80, 50],
roam: true,
label: {
show: true
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 18
},
itemStyle: {
color: '#37a2da'
},
data: [
{
name: '前往机柜',
x: 100,
y: 100,
itemStyle: (curStep == '前往机柜' ? { color: '#40faee' } : {}),
label: {
color: (curStep == '前往机柜' ? 'black' : 'white')
},
},
{
name: '取出服务器',
x: 300,
y: 100,
itemStyle: (curStep == '取出服务器' ? { color: '#40faee' } : {}),
label: {
color: (curStep == '取出服务器' ? 'black' : 'white')
},
symbolOffset: [10, 0]
},
{
name: '运输到维修站',
x: 500,
y: 100,
itemStyle: (curStep == '运输到维修站' ? { color: '#40faee' } : {}),
label: {
color: (curStep == '运输到维修站' ? 'black' : 'white')
},
symbolOffset: [10, 0]
},
{
name: '放下服务器',//检查是否允许放料、放下服务器、检查放下服务器
x: 700,
y: 100,
itemStyle: (curStep == '放下服务器' ? { color: '#40faee' } : {}),
label: {
color: (curStep == '放下服务器' ? 'black' : 'white')
},
symbolOffset: [10, 0]
},
{
name: '开盖',
x: 700,
y: 300,
itemStyle: (curStep == '开盖' ? { color: '#40faee' } : {}),
label: {
color: (curStep == '开盖' ? 'black' : 'white')
},
//symbol:"circle",
//symbol:"rect",
//symbol:"roundRect",
//symbol:"triangle",
//symbol:"diamond",
//symbol:"pin",
//symbol:"arrow",
},
{
name: '取下部件',
x: 560,
y: 300,
itemStyle: (curStep == '取下部件' ? { color: '#40faee' } : {}),
label: {
color: (curStep == '取下部件' ? 'black' : 'white')
},
symbolOffset: [-10, 0]
},
{
name: '部件确认',
x: 410,
y: 300,
itemStyle: (curStep == '部件确认' ? { color: '#40faee' } : {}),
label: {
color: (curStep == '部件确认' ? 'black' : 'white')
},
symbolOffset: [-10, 0]
},
{
name: '插上部件',
x: 260,
y: 300,
itemStyle: (curStep == '插上部件' ? { color: '#40faee' } : {}),
label: {
color: (curStep == '插上部件' ? 'black' : 'white')
},
symbolOffset: [-10, 0]
},
{
name: '合盖',
x: 110,
y: 300,
itemStyle: (curStep == '合盖' ? { color: '#40faee' } : {}),
label: {
color: (curStep == '合盖' ? 'black' : 'white')
},
symbolOffset: [-10, 0]
},
{
name: '前往维修站',
x: 100,
y: 500,
itemStyle: (curStep == '前往维修站' ? { color: '#40faee' } : {}),
label: {
color: (curStep == '前往维修站' ? 'black' : 'white')
},
},
{
name: '抓起服务器',//检查是否允许取料、抓起服务器、检查抓起服务器
x: 240,
y: 500,
itemStyle: (curStep == '抓起服务器' ? { color: '#40faee' } : {}),
label: {
color: (curStep == '抓起服务器' ? 'black' : 'white')
},
symbolOffset: [10, 0]
},
{
name: '运输到机柜',
x: 390,
y: 500,
itemStyle: (curStep == '运输到机柜' ? { color: '#40faee' } : {}),
label: {
color: (curStep == '运输到机柜' ? 'black' : 'white')
},
symbolOffset: [10, 0]
},
{
name: '插入服务器',
x: 540,
y: 500,
itemStyle: (curStep == '插入服务器' ? { color: '#40faee' } : {}),
label: {
color: (curStep == '插入服务器' ? 'black' : 'white')
},
symbolOffset: [10, 0]
},
{
name: '回待命点',
x: 690,
y: 500,
itemStyle: (curStep == '回待命点' ? { color: '#40faee' } : {}),
label: {
color: (curStep == '回待命点' ? 'black' : 'white')
},
symbolOffset: [10, 0]
}
],
links: [
{
source: '前往机柜',
target: '取出服务器',
//symbolSize: [5, 20],
//label: {
// show: true
//},
lineStyle: {
curveness: 0
}
},
{
source: '取出服务器',
target: '运输到维修站',
lineStyle: {
curveness: 0
}
},
{
source: '运输到维修站',
target: '放下服务器',
lineStyle: {
curveness: 0
}
},
{
source: '放下服务器',
target: '开盖',
lineStyle: {
curveness: 0.5
}
},
{
source: '开盖',
target: '取下部件',
lineStyle: {
curveness: 0
}
},
{
source: '取下部件',
target: '部件确认',
lineStyle: {
curveness: 0
}
},
{
source: '部件确认',
target: '插上部件',
lineStyle: {
curveness: 0
}
},
{
source: '插上部件',
target: '合盖',
lineStyle: {
curveness: 0
}
},
{
source: '合盖',
target: '前往维修站',
lineStyle: {
curveness: -0.5
}
},
{
source: '前往维修站',
target: '抓起服务器',
lineStyle: {
curveness: 0
}
},
{
source: '抓起服务器',
target: '运输到机柜',
lineStyle: {
curveness: 0
}
},
{
source: '运输到机柜',
target: '插入服务器',
lineStyle: {
curveness: 0
}
},
{
source: '插入服务器',
target: '回待命点',
lineStyle: {
curveness: 0
}
}
],
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
]
};
option && myChart.setOption(option)
// })
}
},
}
</script>
<style lang="less">
#middle2 {
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: rgba(6, 30, 93, 0.5);
}
</style>
以上可根据后台数据库返回数据实时更新节点状态。