ECS5 / ECS5.0Web · Files

<template>
  <div>
    <div class="tool-style">
      图例：
      <el-tag type="success">待机</el-tag>
      <el-divider direction="vertical"></el-divider>
      <el-tag>正常运行</el-tag>
      <el-divider direction="vertical"></el-divider>
      <el-tag type="warning">非自动</el-tag>
      <el-divider direction="vertical"></el-divider>
      <el-tag type="danger">异常</el-tag>
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" size="mini" icon="el-icon-refresh" @click="reset">复位</el-button>
    </div>
    <div id="flow" class="canvas-style">
      <div id="container"></div>
    </div>
  </div>
</template>

<script>
import FlowGraph from './flow/graph';
import graphData from './flow/graph/data/test-data';
// import graphData from './flow/graph/data/data-custom-3';
import { getGUID } from '@/utils/index.js';
import { conveyor_center, conveyor_left, conveyor_right } from './flow/graph/images';
import { $, getContainerSize } from './flow/index.js';

export default {
  name: 'MapModule',
  data() {
    return {
      canvas: null,
      graph: null,
      initialTranslate: { x: 0, y: 0 },
      initialScale: 1,
      dataJson: graphData,
      srmPath: {},
    };
  },
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    this.getFlowJson()
  },
  destroyed() {
    const { graph } = FlowGraph
    // 销毁画布，资源回收
    if(graph) graph.dispose()
    // 移除监听
    window.removeEventListener('resize', this.resizeFn)
  },
  methods: {
    // 去后台拿json
    getFlowJson() {
      setTimeout(() => {
        const graphJson = this.dataJson;//JSON.parse(window.localStorage.getItem('graphJson'))
        // console.log(graphJson)
        if(graphJson) {
          this.srmPath = {};
          for (let i = 0; i < 8; i++) {
            var x = 150;
            var y = 150;
            switch (i) {
              case 1:
                y = 180;
                break;
              case 2:
                y = 270;
                break; 
              case 3:
                y = 300;
                break; 
              case 4:
                y = 360;
                break; 
              case 5:
                y = 390;
                break; 
              case 6:
                y = 480;
                break; 
              case 7:
                y = 510;
                break; 
            }
            for (let j = 0; j < 28; j++) {
              const isDuplicate = this.srmPath["A"+(j+1)];
              if (isDuplicate == undefined) {
                this.srmPath["A"+(j+1)] = x;
              }
              graphJson.cells.push({
                position: {
                  x: x,
                  y: y
                },
                attrs: {
                  text: {
                  text: j + 1
                  }
                },
                size: {
                  width: 30,
                  height: 30
                },
                shape: 'Storage',
                id: getGUID(),
                zIndex: 1
              })
              x += 30;
            }
          }
          
          this.initFlowImage(graphJson)
        } 
      }, 300)
    },
    // 根据json渲染
    initFlowImage(graphJson) {
      // 初始化画板
      const graph = FlowGraph.init($('#container'), $('#container').getBoundingClientRect().width, $('#container').getBoundingClientRect().height, false)
      // 渲染操作
      graph.fromJSON(graphJson)

      // // 定义新节点的数据
      // const newNode = {
      //   position: { x: 500, y: 500 },
      //   size: { width: 80, height: 42 },
      //   attrs: {
      //     text: { text: '新节点' },
      //     body: { rx: 24, ry: 24 }
      //   },
      //   visible: true,
      //   shape: 'flow-chart-rect',
      //   id: 'new-node-id',
      //   zIndex: 24,
      //   data: { status: 0, pointCode: '53', fieldName: 'newFieldName' }
      // };
      // // 添加新节点到图中
      // graph.addNode(newNode);

      // 监听数据改变事件
      graph.getNodes().forEach(node => {
        if(node.getData()) {
          var data = node.getData();
          if (node.shape.startsWith("Station") && data.type != undefined) {
            if (data.type == "left") {
              node.attr('image/xlink:href', conveyor_left)
              // node.attr('body/class','flash-shrink-animation')
            } else if (data.type == "right") {
              node.attr('image/xlink:href', conveyor_right)
              // node.attr('body/class','flash-shrink-animation')
              // node.attr('body/fill','green')
              // node.attr('text/fill', '#080808')
            } else if (data.type == "center") {
              node.attr('image/xlink:href', conveyor_center)
              // node.attr('body/class','flash-shrink-animation')
              // node.attr('body/fill','green')
              // node.attr('text/fill', '#080808')
            }
          }
          node.on("change:data", ({ cell, current }) => {
            if(current.status == "0") {
              cell.attr('body/class','flash-shrink-animation-close')
            } else {
              cell.attr('body/class','flash-shrink-animation')
            }
            if(current.pallet == "0") {
              cell.attr('imagePallet/class','hide-pallet')
            } else {
              cell.attr('imagePallet/class','show-pallet')
            }
          })
        }
      })

      window.addEventListener('resize', this.resizeFn)
    },    

    resizeFn() {
      setTimeout(() => {
        const { graph } = FlowGraph;
        const { width, height } = getContainerSize($('#flow'));
        graph.resize(width, height);
      }, 100);
    },

    reset(){
      const { graph } = FlowGraph;
      if (graph) {
        // console.log(this.initialScale);
        // console.log(this.initialTranslate);
        // 恢复初始缩放比例
        graph.scale(1, 1);
        // 恢复初始位置
        graph.translate(0, 0);
      }      
    },

    //更新数据
    updateData(srmList, rgvList, stationList) {
      const { graph } = FlowGraph;
      if(graph) {
        // 监听数据改变事件
        graph.getNodes().forEach(node => {
          if(node.getData()) {
            var data = node.getData();
            if (node.shape == "SRM") {
              srmList.forEach(item => {
                // console.log(item)
                if (item.code == data.code) {
                  data.status = item.totalError == "True" ? "1" : "0";
                  data.pallet = item.fork1HasPallet == "True" || item.fork2HasPallet == "True" ? "1" : "0";
                  data.auto = item.operationModel == "5" ? "1" : "0";

                  // 定义要过渡的属性路径
                  const path = 'position/x';
                  // 定义目标值
                  var target = 0;
                  if(item.fork1XPosition!=null){
                    if(item.fork1XPosition < 500){
                      target = this.srmPath["A" + item.fork1XPosition];
                    } else {
                      target = 1000;
                    }
                  }
                  // 定义过渡动画的配置选项
                  const options = {
                    duration: 1000, // 过渡效果持续 1 秒
                    easing: 'ease-out', // 缓动函数为 ease-out
                    callback: function() {
                    }
                  };
                  node.transition(path, target, options);
                }
              })
            } else if(node.shape == "RGV") {
              rgvList.forEach(item => {
                if (item.code == data.code) {
                  data.status = item.totalError == "True" ? "1" : "0";
                  data.pallet = item.fork1HasPallet == "True" || item.fork2HasPallet == "True" ? "1" : "0";
                  data.auto = item.operationModel == "5" ? "1" : "0";
                }
              })
            } else if(node.shape.startsWith("Station")) {
              stationList.forEach(item => {
                if (item.code == data.code) {
                  data.status = item.stationError;
                  data.pallet = item.stationMonitorOccupied;
                  data.auto = item.stationMonitorAutomation;
                }
              })
            }
            if(data.status == "0" && data.auto == "1") {
              node.attr('body/class','flash-shrink-animation-close')
            } else {
              node.attr('body/width',node.getSize().width)
              node.attr('body/height',node.getSize().height)
              if (data.status != "0") {
                node.attr('body/stroke',"#FF0000")
              } else {
                node.attr('body/stroke',"#FFFF00")
              }
              node.attr('body/class','flash-shrink-animation')
            }
            if(data.pallet == "0") {
              node.attr('imagePallet/class','hide-pallet')
            } else {
              node.attr('imagePallet/class','show-pallet')
              //个性化设置
              if (node.shape == "SRM") {
                node.attr('imagePallet/x', 5)
                node.attr('imagePallet/y', 8)
              } else if (node.shape == "Station") {
                node.attr('imagePallet/x', 10)
              }
            }
            node.setData(data);
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.tool-style{
  position: absolute;
  /* left: 0px;
  top: 0px; */
  margin: 10px;
  z-index: 99999;
}
.canvas-style{
  border: 1px solid #EBEEF5;
  width: 100vw;
  height: 100vh
}

</style>
<style>
.el-main {
  padding-top: 0px;
}
</style>