如何实时显示AGV执行步骤任务完成情况？

实现方式：

echarts关系图graph结合webSocker或心跳请求API接口通过canvas实时绘制目前AGV所处节点信息；

业务背景：

客户需求不刷新页面的情况下，实时显示AGV目前所处节点和工作状态信息，图中蓝色部分既是AGV目前所处节点位置 Node2 Node3文字可替换为后台返回状态描述等；

撸码搬砖

<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>