pss_front_vue/src/components/map/GRID-CONST.js

import scss from "./grid-svg/variables.scss";
import scssCanvas from "./grid-canvas/variables-canvas.scss";
export function getScss(type) {
  if (type === "canvas") {
    return scssCanvas;
  } else {
    return scss;
  }
}
export const COMMON_CONST = {
  idSep: "-",
  MAIN_TRACK_DIR: {
    DEFAULT: 0,
    // 支架的方向
    HORIZONTAL: 0, // 横
    VERTICAL: 1, // 纵
  },
};
export const LOCTYPE = {
  default: "default",
  rack: "rack",
  around: "around",
};
export const ITEM_ATTRIBUTE_TYPE = {
  storageLoc: "storageLoc",
  dev: "dev",
  sysSet: "sysSet",
};
export const ITEMSTATUS = {
  default: "default",
  storageLoc: "storageLoc",
  shuttle: "shuttle",
  path: "path",
  pathHasDrived: "pathHasDrived",
  xTrack: "xTrack",
  xTrackEx: "xTrackEx",
  carriageway: "carriageway",
  lift: "lift",
  unExist: "unExist",
  unUse: "unUse",
  charge: "charge",
  entranceAndExit: "entranceAndExit",
  park: "park",
  transport: "transport",
  pillar: "pillar",
  goods: "goods",
};

export const getCFG = (type) => {
  const scss = getScss(type);
  return {
    baseItemStsArr: [
      {
        key: "default",
        name: "默认", //用于给默认样式
        displayControl: {
          isNotShowInCfg: true, // 不在任何配置中显示
        },
        sty: {
          fillColor: scss[ITEMSTATUS.default],
          borderColor: scss["borderColor"],
          lineWidth: 1,
        },
      },
      {
        key: "shuttle",
        name: "四向车",
        displayControl: {
          isNotShowInCfg: true, // 不在任何配置中显示
        },
        sty: {
          fillColor: scss[ITEMSTATUS.shuttle],
        },
      },
      {
        key: "path",
        name: "路线",
        displayControl: {
          isNotShowInCfg: true, // 不在任何配置中显示
        },
        sty: {
          fillColor: scss[ITEMSTATUS.path],
          lineWidth: 2,
        },
      },
      {
        key: "pathHasDrived",
        name: "路线",
        displayControl: {
          isNotShowInCfg: true, // 不在任何配置中显示
        },
        sty: {
          fillColor: scss[ITEMSTATUS.pathHasDrived],
          lineWidth: 2,
        },
      },
      {
        key: "goods",
        name: "货物",
        displayControl: {
          isNotShowInCfg: true, // 不在任何配置中显示
        },
        sty: {
          fillColor: scss[ITEMSTATUS.goods],
          lineWidth: 1,
        },
      },
      {
        key: "xTrack",
        name: "主轨道",
        disableSwitchIsByFloor: true,
        handleMouseMove: function (e) {
          return false;
        },
        sty: {
          fillColor: scss[ITEMSTATUS.xTrack],
        },
        cfgTable: {
          isNotApplyToOtherFloor: true,
          isNotApplyToTotalRow: true,
          isNotApplyToTotalCol: true,
          columnsCfgArr: function (formData) {
            if (!formData.mainTrackDir) {
              return [
                {
                  prop: "r",
                  label: "行",
                  type: "number",
                  template: true,
                  inputProps: {
                    type: "number",
                    placeholder: "",
                  },
                },
              ];
            } else {
              return [
                {
                  prop: "c",
                  label: "列",
                  type: "number",
                  template: true,
                  inputProps: {
                    placeholder: "",
                    type: "number",
                    maxWidth: 100,
                  },
                },
              ];
            }
          },
          toPageDataFun: function (formData) {
            let res = [];
            if (formData[ITEMSTATUS.xTrack]) {
              formData[ITEMSTATUS.xTrack].forEach((item) => {
                let ele = { c: undefined, r: undefined, f: undefined };
                if (!item.mainTrackDir) {
                  ele.r = item;
                } else {
                  ele.c = item;
                }
                res.push(ele);
              });
            }
            return res;
          },
          toBackDataFun: function (formData, cfgTableData) {
            let res = [];
            if (cfgTableData.length > 0) {
              cfgTableData.forEach((item) => {
                if (!formData.mainTrackDir) {
                  res.push(item.r);
                } else {
                  res.push(item.c);
                }
              });
            }
            return res;
          },
        },
        cellSelPanel: {
          procItemDataFun: function (that) {
            const uniqueRowsOrCols = that.getUniqueRowsOrCols();
            return that.getOperItemsForLine(uniqueRowsOrCols);
          },
        },
      },
      {
        key: "xTrackEx",
        name: "拓展主轨道",
        sty: {
          fillColor: scss[ITEMSTATUS.xTrack],
        },
        displayControl: {
          isNotShowInCfgCellSel: true,
        },
      },
      {
        key: "carriageway",
        backKey: "yTrack",
        name: "行车道",
        sty: {
          fillColor: scss[ITEMSTATUS.carriageway],
        },
      },
      {
        key: "lift",
        name: "提升机",
        disableSwitchIsByFloor: true,
        displayControl: {
          isNotShowInCfgCellSel: true,
        },
        sty: {
          fillColor: scss[ITEMSTATUS.lift],
        },
        cfgTable: {
          isNotApplyToOtherFloor: true,
          isNotApplyToTotalRow: true,
          isNotApplyToTotalCol: true,
          columnsCfgArr: function (formData) {
            return [
              {
                prop: "did",
                label: "did",
                template: true,
              },
              {
                prop: "c",
                label: "列",
                type: "number",
                template: true,
                inputProps: {
                  placeholder: "",
                  type: "number",
                },
              },
              {
                prop: "r",
                label: "行",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
              {
                prop: "max_floor",
                label: "最大层",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
              {
                prop: "rS",
                label: "起始行",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
              {
                prop: "rE",
                label: "结束行",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
              {
                prop: "cS",
                label: "起始列",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
              {
                prop: "cE",
                label: "结束列",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
            ];
          },
        },
      },
      {
        key: "unUse",
        // backKey: 'unUse',
        name: "不可用",
        sty: {
          fillColor: scss[ITEMSTATUS.unUse],
        },
      },
      {
        key: "unExist",
        // backKey: 'unExist',
        name: "不存在",
        sty: {
          fillColor: scss[ITEMSTATUS.unExist],
        },
      },
      {
        key: "park",
        name: "停车位",
        sty: {
          fillColor: scss[ITEMSTATUS.park],
        },
      },
      {
        key: "charge",
        name: "充电桩",
        backKey: "charger",
        itemAttributeType: ITEM_ATTRIBUTE_TYPE.dev,
        sty: {
          fillColor: scss[ITEMSTATUS.charge],
          width: 6,
        },
        cfgTable: {
          columnsCfgArr: function (formData) {
            return [
              {
                prop: "did",
                label: "did",
                template: true,
              },
              {
                prop: "c",
                label: "列",
                type: "number",
                template: true,
                inputProps: {
                  placeholder: "",
                  type: "number",
                },
              },
              {
                prop: "r",
                label: "行",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
              {
                prop: "f",
                label: "层",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
            ];
          },
        },
        drawFun: function (that, col) {
          const ctx = that.ctx;
          ctx.save();

          // 设置填充颜色
          ctx.fillStyle = this.sty.fillColor;

          // 获取坐标
          const { x1, y1, x2, y2, x3, y3, x4, y4 } =
            that.calculateCoordinates(col);

          // 计算矩形的宽度和位置
          const width = x2 - x1;
          const rectHeight = this.sty.width || 6; // 使用配置的宽度，默认为6

          // 在顶部绘制矩形
          ctx.fillRect(x1, y1, width, rectHeight);

          ctx.restore();
          return true;
        },
        drawFunSvg: function (that, col) {
          const group = that.createSvgElement("g");

          // 获取坐标和倾斜角度
          const { x1, y1, x2, y2, x3, y3, x4, y4 } =
            that.component.calculateCoordinates(col);
          const angle = that.component.includedAngle || 90;
          const angleInRadians = (angle * Math.PI) / 180;

          // 计算充电桩的高度
          const rectHeight = this.sty.width || 6;

          // 计算平行四边形的四个顶点
          // a点和b点就是原始的x1,y1和x2,y2
          const ax = x1;
          const ay = y1;
          const bx = x2;
          const by = y2;

          // 计算单元格的倾斜向量
          const cellVectorX = x4 - x1;
          const cellVectorY = y4 - y1;
          const cellLength = Math.sqrt(
            cellVectorX * cellVectorX + cellVectorY * cellVectorY
          );

          // 计算单位向量
          const unitVectorX = cellVectorX / cellLength;
          const unitVectorY = cellVectorY / cellLength;

          // 使用单元格的倾斜方向计算偏移量
          const offsetX = rectHeight * unitVectorX;
          const offsetY = rectHeight * unitVectorY;

          // 计算c点和d点
          const dx = ax + offsetX;
          const dy = ay + offsetY;
          const cx = bx + offsetX;
          const cy = by + offsetY;

          // 创建平行四边形
          const rect = that.createSvgElement("polygon", {
            points: `${ax},${ay} ${bx},${by} ${cx},${cy} ${dx},${dy}`,
            fill: this.sty.fillColor,
            stroke: "none",
          });

          group.appendChild(rect);
          that.mainGroup.appendChild(group);
          return true;
        },
      },
      {
        key: "transport",
        backKey: "conveyor",
        name: "输送机",
        itemAttributeType: ITEM_ATTRIBUTE_TYPE.dev,
        sty: {
          fillColor: scss[ITEMSTATUS.transport],
          borderColor: scss[ITEMSTATUS.transport + "BorderColor"],
          borderWidth: 4,
        },
        cfgTable: {
          isNotApplyToOtherFloor: true,
          isNotApplyToTotalRow: true,
          isNotApplyToTotalCol: true,
          columnsCfgArr: function (formData) {
            return [
              {
                prop: "did",
                label: "did",
                template: true,
              },
              {
                prop: "c",
                label: "列",
                type: "number",
                template: true,
                inputProps: {
                  placeholder: "",
                  type: "number",
                },
              },
              {
                prop: "r",
                label: "行",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
              {
                prop: "f",
                label: "层",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
              {
                prop: "rS",
                label: "起始行",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
              {
                prop: "rE",
                label: "结束行",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
              {
                prop: "cS",
                label: "起始列",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
              {
                prop: "cE",
                label: "结束列",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
            ];
          },
        },
        drawFun: function (that, col) {
          const ctx = that.ctx;
          ctx.save();

          // 设置填充和边框颜色
          ctx.fillStyle = this.sty.fillColor;
          ctx.strokeStyle = this.sty.borderColor;

          const borderWidth = this.sty.borderWidth;
          const offset = borderWidth / 2;

          // 获取外部轮廓坐标
          const { x1, y1, x2, y2, x3, y3, x4, y4 } =
            that.calculateCoordinates(col);

          // 计算内部偏移量
          const dx =
            ((x2 - x1) * offset) / Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
          const dy =
            ((y2 - y1) * offset) / Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);

          // 计算内部轮廓坐标
          const ix1 = x1 + dx;
          const iy1 = y1 + dy;
          const ix2 = x2 - dx;
          const iy2 = y2 + dy;
          const ix3 = x3 - dx;
          const iy3 = y3 - dy;
          const ix4 = x4 + dx;
          const iy4 = y4 - dy;

          // 绘制主体形状
          ctx.beginPath();
          ctx.moveTo(ix1, iy1);
          ctx.lineTo(ix2, iy2);
          ctx.lineTo(ix3, iy3);
          ctx.lineTo(ix4, iy4);
          ctx.closePath();
          ctx.fill();

          // 绘制左边框
          ctx.beginPath();
          ctx.lineWidth = borderWidth;
          ctx.moveTo(ix1, iy1);
          ctx.lineTo(ix4, iy4);
          ctx.stroke();

          // 绘制右边框
          ctx.beginPath();
          ctx.moveTo(ix2, iy2);
          ctx.lineTo(ix3, iy3);
          ctx.stroke();

          ctx.restore();
          return true;
        },

        drawFunSvg: function (that, col) {
          const group = that.createSvgElement("g");

          // 获取坐标和计算偏移量
          const { x1, y1, x2, y2, x3, y3, x4, y4 } =
            that.component.calculateCoordinates(col);
          const borderWidth = this.sty.borderWidth || 4;
          const offset = borderWidth / 2;

          // 计算倾斜角度
          const angle = that.component.includedAngle || 90;
          const angleInRadians = (angle * Math.PI) / 180;

          // 根据倾斜角度调整右侧偏移量，使视觉效果一致
          const rightOffset = offset / Math.sin(angleInRadians);

          // 计算内部轮廓坐标
          const ix1 = x1 + offset;
          const iy1 = y1;
          const ix2 = x2 - rightOffset;
          const iy2 = y2;
          const ix3 = x3 - rightOffset;
          const iy3 = y3;
          const ix4 = x4 + offset;
          const iy4 = y4;

          // 创建外部轮廓（左侧平行四边形）
          const leftPolygon = that.createSvgElement("polygon", {
            points: `${x1},${y1} ${ix1},${iy1} ${ix4},${iy4} ${x4},${y4}`,
            fill: this.sty.borderColor,
            stroke: "none",
          });

          // 创建外部轮廓（右侧平行四边形）
          const rightPolygon = that.createSvgElement("polygon", {
            points: `${x2},${y2} ${ix2},${iy2} ${ix3},${iy3} ${x3},${y3}`,
            fill: this.sty.borderColor,
            stroke: "none",
          });

          // 应用偏移量到所有多边形
          [leftPolygon, rightPolygon].forEach((polygon) => {
            const points = polygon.getAttribute("points");
            const offsetPoints = points
              .split(" ")
              .map((point) => {
                const [x, y] = point.split(",");
                return `${parseFloat(x)},${parseFloat(y)}`;
              })
              .join(" ");
            polygon.setAttribute("points", offsetPoints);
          });
          group.appendChild(leftPolygon); // 左边框
          group.appendChild(rightPolygon); // 右边框

          that.mainGroup.appendChild(group);
          return true;
        },
        getTheTargetStsWhenCfg: function (that, ele) {
          if (ele.statusList && Array.isArray(ele.statusList)) {
            // 检查 statusList 中是否存在 this.key 的状态
            const existingStatus = ele.statusList.find(
              (item) => item.status === this.key
            );
            return existingStatus ? "" : this.key;
          }
          return this.key;
        },
      },
      {
        key: "entranceAndExit",
        name: "出入口",
        itemAttributeType: ITEM_ATTRIBUTE_TYPE.sysSet,
        displayControl: {
          isNotShowInCfgCellSel: true,
        },
        paramInfoArr: [
          {
            type: "radio",
            defaultVal: "",
            paramKeyVal: "type",
            options: [
              { label: "出入口", value: "" },
              { label: "出口", value: "exit" },
              { label: "入口", value: "entrance" },
            ],
          },
        ],
        paramToMergeObj: {
          type: "",
          arrowFlow: 0,
        },
        sty: {
          arrowFillColor: scss["arrowColor"],
          arrowStrokeColor: scss["arrowColor"],
          arrowLineWidth: 1,
        },
        getTheTargetStsWhenCfg: function (that, ele) {
          if (ele.statusList && Array.isArray(ele.statusList)) {
            // 检查 statusList 中是否存在 this.key 的状态
            const existingStatus = ele.statusList.find(
              (item) => item.status === this.key
            );
            const isDisItemSts =
              existingStatus &&
              (!that.paramToMergeObj.type ||
                (existingStatus.paramToMergeObj &&
                  existingStatus.paramToMergeObj.arrowFlow === 1));
            return isDisItemSts ? "" : this.key;
          }
          return this.key;
        },
        handleDoubleClick: function (e) {
          return false;
        },
        handleMouseMove: function (e) {
          return false;
        },
        drawFun: function (that, col) {
          let arrowType;
          const isHorizontal = that.isHorizontal();
          const angle = that.rotationAngleType || 0;
          // mergeObj.type = 'exit' //TEST
          if (col.type === "exit") {
            if (isHorizontal) {
              switch (angle) {
                case 0:
                  arrowType = "down";
                  break;
                case 1:
                  arrowType = "left";
                  break;
                case 2:
                  arrowType = "up";
                  break;
                case 3:
                  arrowType = "right";
                  break;
              }
            } else {
              switch (angle) {
                case 0:
                  arrowType = "left";
                  break;
                case 1:
                  arrowType = "up";
                  break;
                case 2:
                  arrowType = "right";
                  break;
                case 3:
                  arrowType = "down";
                  break;
              }
            }
          } else if (col.type === "entrance") {
            if (isHorizontal) {
              switch (angle) {
                case 0:
                  arrowType = "up";
                  break;
                case 1:
                  arrowType = "right";
                  break;
                case 2:
                  arrowType = "down";
                  break;
                case 3:
                  arrowType = "left";
                  break;
              }
            } else {
              switch (angle) {
                case 0:
                  arrowType = "right";
                  break;
                case 1:
                  arrowType = "down";
                  break;
                case 2:
                  arrowType = "left";
                  break;
                case 3:
                  arrowType = "up";
                  break;
              }
            }
          } else {
            // 双向箭头的情况保持不变
            if (angle === 1 || angle === 3) {
              arrowType = isHorizontal ? "bidirectional-h" : "bidirectional-v";
            } else {
              arrowType = isHorizontal ? "bidirectional-v" : "bidirectional-h";
            }
          }
          if (col.type && col.arrowFlow === 1) {
            const reverseMap = {
              up: "down",
              down: "up",
              left: "right",
              right: "left",
            };
            arrowType = reverseMap[arrowType] || arrowType;
          }
          that.ctx.fillStyle = this.sty.arrowFillColor;
          that.ctx.strokeStyle = this.sty.arrowStrokeColor;
          that.ctx.lineWidth = this.sty.arrowLineWidth;
          const coordinates = that.calculateCoordinates(col);
          drawArrow(that.ctx, coordinates, arrowType);
          return "entranceAndExit-drawFun";
        },
        drawFunSvg: function (that, col) {
          const group = that.createSvgElement("g");
          let arrowType;
          const isHorizontal = that.component.isHorizontal();
          const angle = that.component.rotationAngleType || 0;

          // 确定箭头类型
          if (col.type === "exit") {
            if (isHorizontal) {
              switch (angle) {
                case 0:
                  arrowType = "down";
                  break;
                case 1:
                  arrowType = "left";
                  break;
                case 2:
                  arrowType = "up";
                  break;
                case 3:
                  arrowType = "right";
                  break;
              }
            } else {
              switch (angle) {
                case 0:
                  arrowType = "left";
                  break;
                case 1:
                  arrowType = "up";
                  break;
                case 2:
                  arrowType = "right";
                  break;
                case 3:
                  arrowType = "down";
                  break;
              }
            }
          } else if (col.type === "entrance") {
            if (isHorizontal) {
              switch (angle) {
                case 0:
                  arrowType = "up";
                  break;
                case 1:
                  arrowType = "right";
                  break;
                case 2:
                  arrowType = "down";
                  break;
                case 3:
                  arrowType = "left";
                  break;
              }
            } else {
              switch (angle) {
                case 0:
                  arrowType = "right";
                  break;
                case 1:
                  arrowType = "down";
                  break;
                case 2:
                  arrowType = "left";
                  break;
                case 3:
                  arrowType = "up";
                  break;
              }
            }
          } else {
            if (angle === 1 || angle === 3) {
              arrowType = isHorizontal ? "bidirectional-h" : "bidirectional-v";
            } else {
              arrowType = isHorizontal ? "bidirectional-v" : "bidirectional-h";
            }
          }

          if (col.type && col.arrowFlow === 1) {
            const reverseMap = {
              up: "down",
              down: "up",
              left: "right",
              right: "left",
            };
            arrowType = reverseMap[arrowType] || arrowType;
          }

          // 获取坐标
          const { x1, y1, x2, y2, x3, y3, x4, y4 } =
            that.component.calculateCoordinates(col);
          const centerX = (x1 + x2 + x3 + x4) / 4;
          const centerY = (y1 + y2 + y3 + y4) / 4;
          const width = Math.max(x2 - x1, x3 - x4);
          const height = Math.max(y4 - y1, y3 - y2);

          // 基准尺寸
          const BASE_SIZE = {
            arrowWidth: 16, // 减小箭头宽度，使其更协调
            arrowLength: 10, // 减小箭头长度，保持比例
            bodyThickness: 6, // 减小主体厚度，使其更精致
          };

          // 计算缩放比例
          const minDimension = Math.min(width, height);
          const scale = minDimension / 30; // 调整基准缩放比例

          const arrowWidth = BASE_SIZE.arrowWidth * scale;
          const arrowLength = BASE_SIZE.arrowLength * scale;
          const bodyThickness = BASE_SIZE.bodyThickness * scale;

          // 创建箭头路径
          let pathData = "";
          switch (arrowType) {
            case "bidirectional-h": {
              const bodyWidth = Math.min(width * 0.5, width - 2 * arrowLength);
              pathData = `
                M ${centerX - bodyWidth / 2} ${centerY - bodyThickness / 2}
                L ${centerX + bodyWidth / 2} ${centerY - bodyThickness / 2}
                L ${centerX + bodyWidth / 2} ${centerY + bodyThickness / 2}
                L ${centerX - bodyWidth / 2} ${centerY + bodyThickness / 2}
                Z
                M ${centerX - bodyWidth / 2} ${centerY - arrowWidth / 2}
                L ${centerX - bodyWidth / 2 - arrowLength} ${centerY}
                L ${centerX - bodyWidth / 2} ${centerY + arrowWidth / 2}
                Z
                M ${centerX + bodyWidth / 2} ${centerY - arrowWidth / 2}
                L ${centerX + bodyWidth / 2 + arrowLength} ${centerY}
                L ${centerX + bodyWidth / 2} ${centerY + arrowWidth / 2}
                Z
              `;
              break;
            }
            case "bidirectional-v": {
              const bodyHeight = Math.min(
                height * 0.5,
                height - 2 * arrowLength
              );
              pathData = `
                M ${centerX - bodyThickness / 2} ${centerY - bodyHeight / 2}
                L ${centerX + bodyThickness / 2} ${centerY - bodyHeight / 2}
                L ${centerX + bodyThickness / 2} ${centerY + bodyHeight / 2}
                L ${centerX - bodyThickness / 2} ${centerY + bodyHeight / 2}
                Z
                M ${centerX - arrowWidth / 2} ${centerY - bodyHeight / 2}
                L ${centerX} ${centerY - bodyHeight / 2 - arrowLength}
                L ${centerX + arrowWidth / 2} ${centerY - bodyHeight / 2}
                Z
                M ${centerX - arrowWidth / 2} ${centerY + bodyHeight / 2}
                L ${centerX} ${centerY + bodyHeight / 2 + arrowLength}
                L ${centerX + arrowWidth / 2} ${centerY + bodyHeight / 2}
                Z
              `;
              break;
            }
            case "down": {
              const bodyHeight = height * 0.5;
              pathData = `
                M ${centerX - bodyThickness / 2} ${centerY - bodyHeight / 2}
                L ${centerX + bodyThickness / 2} ${centerY - bodyHeight / 2}
                L ${centerX + bodyThickness / 2} ${centerY + bodyHeight / 2}
                L ${centerX + arrowWidth / 2} ${centerY + bodyHeight / 2}
                L ${centerX} ${Math.min(
                centerY + bodyHeight / 2 + arrowLength,
                y4
              )}
                L ${centerX - arrowWidth / 2} ${centerY + bodyHeight / 2}
                L ${centerX - bodyThickness / 2} ${centerY + bodyHeight / 2}
                Z
              `;
              break;
            }
            case "left": {
              const bodyWidth = width * 0.5;
              pathData = `
                M ${centerX - bodyWidth / 2} ${centerY - bodyThickness / 2}
                L ${centerX + bodyWidth / 2} ${centerY - bodyThickness / 2}
                L ${centerX + bodyWidth / 2} ${centerY + bodyThickness / 2}
                L ${centerX - bodyWidth / 2} ${centerY + bodyThickness / 2}
                Z
                M ${centerX - bodyWidth / 2} ${centerY - arrowWidth / 2}
                L ${Math.max(
                  centerX - bodyWidth / 2 - arrowLength,
                  x1
                )} ${centerY}
                L ${centerX - bodyWidth / 2} ${centerY + arrowWidth / 2}
                Z
              `;
              break;
            }
            case "up": {
              const bodyHeight = height * 0.5;
              pathData = `
                M ${centerX - bodyThickness / 2} ${centerY - bodyHeight / 2}
                L ${centerX + bodyThickness / 2} ${centerY - bodyHeight / 2}
                L ${centerX + bodyThickness / 2} ${centerY + bodyHeight / 2}
                L ${centerX - bodyThickness / 2} ${centerY + bodyHeight / 2}
                Z
                M ${centerX - arrowWidth / 2} ${centerY - bodyHeight / 2}
                L ${centerX} ${Math.max(
                centerY - bodyHeight / 2 - arrowLength,
                y1
              )}
                L ${centerX + arrowWidth / 2} ${centerY - bodyHeight / 2}
                Z
              `;
              break;
            }
            case "right": {
              const bodyWidth = width * 0.5;
              pathData = `
                M ${centerX - bodyWidth / 2} ${centerY - bodyThickness / 2}
                L ${centerX + bodyWidth / 2} ${centerY - bodyThickness / 2}
                L ${centerX + bodyWidth / 2} ${centerY - arrowWidth / 2}
                L ${Math.min(
                  centerX + bodyWidth / 2 + arrowLength,
                  x2
                )} ${centerY}
                L ${centerX + bodyWidth / 2} ${centerY + arrowWidth / 2}
                L ${centerX + bodyWidth / 2} ${centerY + bodyThickness / 2}
                L ${centerX - bodyWidth / 2} ${centerY + bodyThickness / 2}
                Z
              `;
              break;
            }
          }

          // 创建SVG路径元素
          const path = that.createSvgElement("path", {
            d: pathData,
            fill: this.sty.arrowFillColor,
            stroke: "none", // 移除描边，使外观更清晰
            transform: `rotate(${that.component.includedAngle}, ${centerX}, ${centerY})`, // 添加旋转变换
          });

          group.appendChild(path);
          that.mainGroup.appendChild(group);
          return "entranceAndExit-drawFunSvg";
        },
        cfgTable: {
          toBackDataFun: function (formData, cfgTableData) {
            let res = [];
            if (cfgTableData.length > 0) {
              cfgTableData.forEach((item) => {
                if (item.type !== "exit" && item.type !== "entrance") {
                  item.type = "";
                  res.push(item);
                }
              });
            }
            return res;
          },
        },
      },
      {
        key: "storageLoc",
        name: "货位",
        noToBackData: true,
        displayControl: {
          isNotShowInCfgPanel: true, // 不在按钮配置面板显示
        },
        sty: {
          fillColor: scss[ITEMSTATUS.storageLoc],
        },
      },
      {
        key: "digitalInput",
        name: "光电",
        itemAttributeType: ITEM_ATTRIBUTE_TYPE.dev,
        displayControl: {
          isNotShowInCfgCellSel: true,
        },
        cfgTable: {
          columnsCfgArr: function (formData) {
            return [
              {
                prop: "did",
                label: "did",
                template: true,
              },
              {
                prop: "c",
                label: "列",
                type: "number",
                template: true,
                inputProps: {
                  placeholder: "",
                  type: "number",
                },
              },
              {
                prop: "r",
                label: "行",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
              {
                prop: "f",
                label: "层",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
            ];
          },
        },
        drawFun: function (that, col) {
          return true;
        },
      },
      {
        key: "narrowGate",
        name: "限宽门",
        itemAttributeType: ITEM_ATTRIBUTE_TYPE.dev,
        displayControl: {
          isNotShowInCfgCellSel: true,
        },
        cfgTable: {
          columnsCfgArr: function (formData) {
            return [
              {
                prop: "did",
                label: "did",
                template: true,
              },
              {
                prop: "c",
                label: "列",
                type: "number",
                template: true,
                inputProps: {
                  placeholder: "",
                  type: "number",
                },
              },
              {
                prop: "r",
                label: "行",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
              {
                prop: "f",
                label: "层",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
            ];
          },
        },
        drawFun: function (that, col) {
          return true;
        },
      },
      {
        key: "codeScanners",
        name: "扫码器",
        backKey: "codeScanner",
        itemAttributeType: ITEM_ATTRIBUTE_TYPE.dev,
        displayControl: {
          isNotShowInCfgCellSel: true,
        },
        cfgTable: {
          columnsCfgArr: function (formData) {
            return [
              {
                prop: "did",
                label: "did",
                template: true,
              },
              {
                prop: "c",
                label: "列",
                type: "number",
                template: true,
                inputProps: {
                  placeholder: "",
                  type: "number",
                },
              },
              {
                prop: "r",
                label: "行",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
              {
                prop: "f",
                label: "层",
                type: "number",
                template: true,
                inputProps: {
                  type: "number",
                  placeholder: "",
                },
              },
            ];
          },
        },
        drawFun: function (that, col) {
          return true;
        },
      },
      {
        key: LOCTYPE.around,
        LOCTYPE: LOCTYPE.around,
        name: "货架外围", //用于给默认样式
        locType: LOCTYPE.around,
        noToBackData: true,
        disableSwitchIsByFloor: true,
        sty: {
          btnStyle: {
            noIcon: true,
          },
          fillColor: scss[LOCTYPE.around],
          // numSty:{
          //     cellNumFontColor:'white'
          // }
        },
        paramInfoArr: [
          {
            type: "input",
            defaultVal: "",
            paramKeyVal: "up",
            dataType: "number",
            label: "上",
            rules: [
              {
                type: "number",
                min: 0,
                message: "请输入大于等于0的整数",
                trigger: "blur",
              },
            ],
          },
          {
            type: "input",
            defaultVal: "",
            paramKeyVal: "down",
            dataType: "number",
            label: "下",
            rules: [
              {
                type: "number",
                min: 0,
                message: "请输入大于等于0的整数",
                trigger: "blur",
              },
            ],
          },
          {
            type: "input",
            defaultVal: "",
            paramKeyVal: "left",
            label: "左",
            dataType: "number",
            rules: [
              {
                type: "number",
                min: 0,
                message: "请输入大于等于0的整数",
                trigger: "blur",
              },
            ],
          },
          {
            type: "input",
            defaultVal: "",
            paramKeyVal: "right",
            label: "右",
            dataType: "number",
            rules: [
              {
                type: "number",
                min: 0,
                message: "请输入大于等于0的整数",
                trigger: "blur",
              },
            ],
          },
        ],
        // 添加合并参数对象
        paramToMergeObj: {
          up: undefined,
          down: undefined,
          left: undefined,
          right: undefined,
        },
        updateFormDataAround: function (formData) {
          if (!formData.around) {
            formData.around = {};
          }
          Object.keys(this.paramToMergeObj).forEach((key) => {
            formData.around[key] = this.paramToMergeObj[key];
          });
        },
        validateWheConfirmCfg: function (formData, that) {
          // 从this.paramToMergeObj获取参数
          if (!this.paramToMergeObj) {
            console.warn("paramToMergeObj is missing");
            return true;
          }

          // 获取旋转角度
          const rotation = formData.rotation || 0;

          // 计算实际的起始行列
          let rowStart, colStart;

          switch (rotation) {
            case 0: // 0度
              rowStart = this.paramToMergeObj.down || 0;
              colStart = this.paramToMergeObj.left || 0;
              break;
            case 1: // 90度
              rowStart = this.paramToMergeObj.left || 0;
              colStart = this.paramToMergeObj.up || 0;
              break;
            case 2: // 180度
              rowStart = this.paramToMergeObj.up || 0;
              colStart = this.paramToMergeObj.right || 0;
              break;
            case 3: // 270度
              rowStart = this.paramToMergeObj.right || 0;
              colStart = this.paramToMergeObj.down || 0;
              break;
            default:
              rowStart = this.paramToMergeObj.down || 0;
              colStart = this.paramToMergeObj.left || 0;
          }

          // 检查是否在有效范围内
          if (rowStart < 0 || rowStart > formData.rowStart) {
            switch (rotation) {
              case 0: // 0度
                that.$message.error(
                  "下侧增加的外围数量超出仓库范围!请调整rowStart或外围下侧数量"
                );
                break;
              case 1: // 90度
                that.$message.error(
                  "左侧增加的外围数量超出仓库范围!请调整rowStart或外围左侧数量"
                );
                break;
              case 2: // 180度
                that.$message.error(
                  "上侧增加的外围数量超出仓库范围!请调整rowStart或外围上侧数量"
                );
                break;
              case 3: // 270度
                that.$message.error(
                  "右侧增加的外围数量超出仓库范围!请调整rowStart或外围右侧数量"
                );
                break;
              default:
                that.$message.error(
                  "下侧增加的外围数量超出仓库范围!请调整rowStart或外围下侧数量"
                );
                break;
            }
            return true;
          }
          if (colStart < 0 || colStart > formData.colStart) {
            switch (rotation) {
              case 0: // 0度
                that.$message.error(
                  "左侧增加的外围数量超出仓库范围!请调整colStart或外围左侧数量"
                );
                break;
              case 1: // 90度
                that.$message.error(
                  "上侧增加的外围数量超出仓库范围!请调整colStart或外围上侧数量"
                );
                break;
              case 2: // 180度
                that.$message.error(
                  "右侧增加的外围数量超出仓库范围!请调整colStart或外围右侧数量"
                );
                break;
              case 3: // 270度
                that.$message.error(
                  "下侧增加的外围数量超出仓库范围!请调整colStart或外围下侧数量"
                );
                break;
              default:
                that.$message.error(
                  "左侧增加的外围数量超出仓库范围!请调整colStart或外围左侧数量"
                );
                break;
            }
            return true;
          }
          return false;
        },
        confirmCfg: function (formData, that) {
          if (!this.paramToMergeObj) {
            return;
          }
          this.updateFormDataAround(formData);
          that.$emit("operCfg", {
            operType: "chgAroundBasicInfo",
            operItemStsObj: this,
            formData,
          });
        },
        cancelCfg: function (formData, that) {
          this.paramToMergeObj = JSON.parse(
            JSON.stringify(this.paramToMergeObjStore)
          );
          this.updateFormDataAround(formData);
          that.$emit("operCfg", {
            operType: "chgAroundBasicInfo",
            operItemStsObj: this,
            formData,
          });
        },
        resetCfg: function (formData, that) {
          this.paramToMergeObj.left = 0;
          this.paramToMergeObj.right = 0;
          this.paramToMergeObj.up = 0;
          this.paramToMergeObj.down = 0;
          this.paramToMergeObjStore = JSON.parse(
            JSON.stringify(this.paramToMergeObj)
          );
          this.updateFormDataAround(formData);
          that.$emit("operCfg", {
            operType: "chgAroundBasicInfo",
            operItemStsObj: this,
            formData,
          });
        },
        handleClick: function (e) {
          return false;
        },
        handleDoubleClick: function (e) {
          return false;
        },
        handleMouseMove: function (e) {
          return false;
        },
      },
      {
        key: "exStorage",
        name: "外围货位",
        displayControl: {
          isNotShowInCfgCellSel: true,
        },
        sty: {
          fillColor: scss[ITEMSTATUS.storageLoc],
        },
      },
    ],
    cellSty: {
      cellLen: 20,
      cellWidth: 52,
      cellNumFont: "12px Arial",
      cellNumFontColor: "#333333",
      widthForFlrNum1: 18,
      cellXOffset: 4,
      widthColInd2: 24,
      cellYOffset: 14,
      cellMinLen: 12,
      cellMaxLen: 40,
      rackIdxNumOffsetLen: 24,
      rackIdxNumFont: "12px Arial",
      rackIdxNumFontColor: "#666",
      rackIdxNumSideYPadding: 8, //考虑文字居中渲染
      rackIdxNumSideXPadding: 0,
    },
  };
};
/**
 * 绘制箭头
 * @param {CanvasRenderingContext2D} ctx - Canvas上下文
 * @param {Object} coordinates - 坐标点对象 { x1, y1, x2, y2, x3, y3, x4, y4 }
 * @param {string} type - 箭头类型：'bidirectional-h','bidirectional-v','right','left','up','down'
 */
function drawArrow(ctx, coordinates, type) {
  const { x1, y1, x2, y2, x3, y3, x4, y4 } = coordinates;
  const centerX = (x1 + x2 + x3 + x4) / 4;
  const centerY = (y1 + y2 + y3 + y4) / 4;
  const width = Math.max(x2 - x1, x3 - x4);
  const height = Math.max(y4 - y1, y3 - y2);

  // 调整基准尺寸，使其更适合小格子
  const BASE_SIZE = {
    arrowWidth: 24, // 减小箭头宽度
    arrowLength: 12, // 减小箭头长度
    bodyThickness: 10, // 减小主体厚度
  };

  // 计算缩放比例，确保箭头完整显示
  const minDimension = Math.min(width, height);
  const scale = minDimension / 40; // 移除最小值限制，让箭头始终按比例缩放

  const arrowWidth = BASE_SIZE.arrowWidth * scale;
  const arrowLength = BASE_SIZE.arrowLength * scale;
  const bodyThickness = BASE_SIZE.bodyThickness * scale;

  switch (type) {
    case "bidirectional-h": {
      const bodyWidth = Math.min(width * 0.4, width - 2 * arrowLength);
      ctx.beginPath();
      // 主体矩形
      ctx.moveTo(centerX - bodyWidth / 2, centerY - bodyThickness / 2);
      ctx.lineTo(centerX + bodyWidth / 2, centerY - bodyThickness / 2);
      ctx.lineTo(centerX + bodyWidth / 2, centerY + bodyThickness / 2);
      ctx.lineTo(centerX - bodyWidth / 2, centerY + bodyThickness / 2);

      // 左侧箭头
      ctx.moveTo(centerX - bodyWidth / 2, centerY - arrowWidth / 2);
      ctx.lineTo(centerX - bodyWidth / 2 - arrowLength, centerY);
      ctx.lineTo(centerX - bodyWidth / 2, centerY + arrowWidth / 2);

      // 右侧箭头
      ctx.moveTo(centerX + bodyWidth / 2, centerY - arrowWidth / 2);
      ctx.lineTo(centerX + bodyWidth / 2 + arrowLength, centerY);
      ctx.lineTo(centerX + bodyWidth / 2, centerY + arrowWidth / 2);
      break;
    }

    case "bidirectional-v": {
      const bodyHeight = Math.min(height * 0.4, height - 2 * arrowLength);
      ctx.beginPath();
      // 主体矩形
      ctx.moveTo(centerX - bodyThickness / 2, centerY - bodyHeight / 2);
      ctx.lineTo(centerX + bodyThickness / 2, centerY - bodyHeight / 2);
      ctx.lineTo(centerX + bodyThickness / 2, centerY + bodyHeight / 2);
      ctx.lineTo(centerX - bodyThickness / 2, centerY + bodyHeight / 2);

      // 上箭头
      ctx.moveTo(centerX - arrowWidth / 2, centerY - bodyHeight / 2);
      ctx.lineTo(centerX, centerY - bodyHeight / 2 - arrowLength);
      ctx.lineTo(centerX + arrowWidth / 2, centerY - bodyHeight / 2);

      // 下箭头
      ctx.moveTo(centerX - arrowWidth / 2, centerY + bodyHeight / 2);
      ctx.lineTo(centerX, centerY + bodyHeight / 2 + arrowLength);
      ctx.lineTo(centerX + arrowWidth / 2, centerY + bodyHeight / 2);
      break;
    }
    case "down": {
      const bodyHeight = height * 0.4;
      ctx.beginPath();
      // 主体矩形
      ctx.moveTo(centerX - bodyThickness / 2, centerY - bodyHeight / 2);
      ctx.lineTo(centerX + bodyThickness / 2, centerY - bodyHeight / 2);
      ctx.lineTo(centerX + bodyThickness / 2, centerY + bodyHeight / 2);
      ctx.lineTo(centerX + arrowWidth / 2, centerY + bodyHeight / 2);
      // 箭头
      ctx.lineTo(centerX, Math.min(centerY + bodyHeight / 2 + arrowLength, y4)); // 确保不超出底部边界
      ctx.lineTo(centerX - arrowWidth / 2, centerY + bodyHeight / 2);
      ctx.lineTo(centerX - bodyThickness / 2, centerY + bodyHeight / 2);
      break;
    }

    case "left": {
      const bodyWidth = width * 0.4;
      ctx.beginPath();
      // 主体矩形
      ctx.moveTo(centerX - bodyWidth / 2, centerY - bodyThickness / 2);
      ctx.lineTo(centerX + bodyWidth / 2, centerY - bodyThickness / 2);
      ctx.lineTo(centerX + bodyWidth / 2, centerY + bodyThickness / 2);
      ctx.lineTo(centerX - bodyWidth / 2, centerY + bodyThickness / 2);
      // 箭头
      ctx.moveTo(centerX - bodyWidth / 2, centerY - arrowWidth / 2);
      ctx.lineTo(Math.max(centerX - bodyWidth / 2 - arrowLength, x1), centerY); // 确保不超出左侧边界
      ctx.lineTo(centerX - bodyWidth / 2, centerY + arrowWidth / 2);
      break;
    }

    case "up": {
      const bodyHeight = height * 0.4;
      ctx.beginPath();
      // 主体矩形
      ctx.moveTo(centerX - bodyThickness / 2, centerY - bodyHeight / 2);
      ctx.lineTo(centerX + bodyThickness / 2, centerY - bodyHeight / 2);
      ctx.lineTo(centerX + bodyThickness / 2, centerY + bodyHeight / 2);
      ctx.lineTo(centerX - bodyThickness / 2, centerY + bodyHeight / 2);
      // 箭头
      ctx.moveTo(centerX - arrowWidth / 2, centerY - bodyHeight / 2);
      ctx.lineTo(centerX, Math.max(centerY - bodyHeight / 2 - arrowLength, y1)); // 确保不超出顶部边界
      ctx.lineTo(centerX + arrowWidth / 2, centerY - bodyHeight / 2);
      break;
    }

    case "right": {
      const bodyWidth = width * 0.4;
      ctx.beginPath();
      // 主体矩形
      ctx.moveTo(centerX - bodyWidth / 2, centerY - bodyThickness / 2);
      ctx.lineTo(centerX + bodyWidth / 2, centerY - bodyThickness / 2);
      ctx.lineTo(centerX + bodyWidth / 2, centerY - arrowWidth / 2);
      ctx.lineTo(Math.min(centerX + bodyWidth / 2 + arrowLength, x2), centerY); // 确保不超出右侧边界
      ctx.lineTo(centerX + bodyWidth / 2, centerY + arrowWidth / 2);
      ctx.lineTo(centerX + bodyWidth / 2, centerY + bodyThickness / 2);
      ctx.lineTo(centerX - bodyWidth / 2, centerY + bodyThickness / 2);
      break;
    }
  }

  ctx.closePath();
  ctx.fill();
}

/**
 * 根据条件返回相应的 SCSS 对象
 * @param {string} type - 类型参数，用于决定返回哪个 SCSS 对象
 * @returns {object} - 返回相应的 SCSS 对象
 */