ECS5 / ECS5.0Web · Files

<template>
  <div class="map-module">
    <div class="tool-style">
      <span style="font-size: 14px; color: #409eff"
        >{{ $t("main.monitor.legend") }}：</span
      >
      <el-tag type="success" effect="dark">{{
        $t("main.monitor.standby")
      }}</el-tag>
      <el-divider direction="vertical"></el-divider>
      <el-tag effect="dark">{{ $t("main.monitor.normalRunning") }}</el-tag>
      <el-divider direction="vertical"></el-divider>
      <el-tag type="warning" effect="dark">{{
        $t("main.monitor.nonAutomatic")
      }}</el-tag>
      <el-divider direction="vertical"></el-divider>
      <el-tag type="danger" effect="dark">{{
        $t("main.monitor.abnormal")
      }}</el-tag>
      <el-divider direction="vertical"></el-divider>
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-refresh"
        @click="reset"
        >{{ $t("main.monitor.reset") }}</el-button
      >
      <el-divider direction="vertical"></el-divider>
      <div style="width: 350px">
        {{ $t("main.monitor.currentScalingFactor") }}：{{ scale.sx }}
      </div>
      <!-- <el-divider direction="vertical"></el-divider> -->
      <!-- <span>当前偏移量：1</span> -->
    </div>
    <div id="flow" class="canvas-style">
      <div id="container" @wheel.prevent="onWheel"></div>
      <!-- @mousedown="onMouseDown"
        @mousemove="onMouseMove"
        @mouseup="onMouseUp" -->
    </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,
  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: {},
      scale: {
        sx: 1,
        sy: 1,
      },
      isDragging: false, // 标记是否正在拖动
      lastPointer: null, // 记录上次鼠标位置
      canvasTop: 0, // 画布的顶部偏移
      canvasLeft: 0, // 画布的左部偏移
    };
  },
  props: {
    isActive: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    this.getFlowJson();
  },
  destroyed() {
    const { graph } = FlowGraph;
    // 销毁画布，资源回收
    if (graph) graph.dispose();
    // 移除监听
    window.removeEventListener("resize", this.resizeFn);
  },
  methods: {
    onWheel(event) {
      const { graph } = FlowGraph;
      if (graph) {
        this.scale.sx = parseFloat(graph.scale().sx.toFixed(2));
      }
    },
    onMouseDown(event) {
      this.isDragging = true;
      // this.lastPointer = this.canvas.getPointer(event);
      // 获取相对于视口的坐标
      const clientX = event.clientX;
      const clientY = event.clientY;

      // 获取相对于页面的坐标
      const pageX = event.pageX;
      const pageY = event.pageY;

      // 获取相对于目标元素的坐标
      const rect = event.target.getBoundingClientRect();
      const offsetX = event.clientX - rect.left;
      const offsetY = event.clientY - rect.top;

      console.log("相对于视口的坐标:", clientX, clientY);
      console.log("相对于页面的坐标:", pageX, pageY);
      console.log("相对于 div 的坐标:", offsetX, offsetY);
    },
    onMouseMove(event) {
      if (this.isDragging) {
        // const currentPointer = this.canvas.getPointer(event);
        // const deltaX = currentPointer.x - this.lastPointer.x;
        // const deltaY = currentPointer.y - this.lastPointer.y;
        // // 更新 canvasTop 和 canvasLeft
        // this.canvasTop += deltaY;
        // this.canvasLeft += deltaX;
        // this.lastPointer = currentPointer;
      }
    },
    onMouseUp() {
      this.isDragging = false;
    },
    // 去后台拿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);

      console.log(graph.getNodes());
      // 监听数据改变事件
      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')
            } else {
              node.attr("image/xlink:href", conveyor);
            }
          }
          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");
            }
          });
        }
        if (node.shape === "Storage") {
          node.attr("body/width", 30);
          node.attr("body/height", 30);
        }
      });

      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();
            var isExist = false;
            if (node.shape == "SRM") {
              srmList.forEach((item) => {
                // console.log(item)
                if (item.code == data.code) {
                  isExist = true;
                  data.status = item.totalError == "True" ? "1" : "0";
                  data.pallet =
                    item.fork1HasPallet == "True" ||
                    item.fork2HasPallet == "True"
                      ? "1"
                      : "0";
                  data.auto = item.operationModel == "5" ? "1" : "0";
                  data.text = item.fork1GoodsBarcode;

                  // 定义要过渡的属性路径
                  const path = "position/x";
                  // 定义目标值
                  var target = 0;
                  if (
                    item.fork1XPosition != null &&
                    item.fork1XPosition != ""
                  ) {
                    if (item.fork1XPosition < 500) {
                      target = this.srmPath["A" + item.fork1XPosition];
                    } else {
                      target = 1000;
                    }
                  } else {
                    target = -999;
                  }
                  if (target != -999) {
                    // 定义过渡动画的配置选项
                    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) {
                  isExist = true;
                  data.status = item.totalError == "True" ? "1" : "0";
                  data.pallet =
                    item.fork1HasPallet == "True" ||
                    item.fork2HasPallet == "True"
                      ? "1"
                      : "0";
                  data.auto = item.operationModel == "5" ? "1" : "0";
                  data.text = item.fork1GoodsBarcode;
                }
              });
            } else if (node.shape.startsWith("Station")) {
              stationList.forEach((item) => {
                if (item.code.replace("StationMonitor", "") == data.code) {
                  isExist = true;
                  data.status =
                    item.stationError == "" ? "0" : item.stationError;
                  data.pallet = item.stationMonitorOccupied;
                  data.auto = item.stationMonitorAutomation;
                  data.text = item.stationMonitorBarcode;
                }
              });
            }
            if (isExist) {
              //状态
              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");
                  // node.attr('body/stroke',"#f56c6c")
                } else {
                  node.attr("body/stroke", "#FFFF00");
                  // node.attr('body/stroke',"#e6a23c")
                }
                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", 0);
                } else if (node.shape == "Station") {
                  node.attr("imagePallet/x", 10);
                }
                //托盘
                if (data.text != "") {
                  node.attr("textCode/text", data.text);
                }
              }
              node.setData(data);
            } else {
              node.attr("body/width", node.getSize().width);
              node.attr("body/height", node.getSize().height);
              node.attr("body/stroke", "#FFFF00");
              node.attr("body/class", "flash-shrink-animation");
            }
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.tool-style {
  position: absolute;
  /* left: 0px;
  top: 0px; */
  display: flex;
  align-items: center;
  margin: 10px;
  z-index: 99999;
}
.canvas-style {
  border: 1px solid #ebeef5;
  width: 100vw;
  height: 100vh;
}
</style>
<style>
.map-module {
  .el-main {
    padding-top: 0px;
  }
}
</style>