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

      // 监听数据改变事件

      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");

            }

          });

        }

      });

      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>