pss_front_vue/src/components/map/grid-svg/index.vue

<template>
  <div
    ref="wareHouseArea"
    class="svg-container"
    :style="{ background: scssVariables.default }"
    v-loading="canvasLoading"
  >
    <div class="toolbar">
      <img
        title="旋转90度"
        :src="imageBtnSrc"
        :style="imageBtnStyle"
        alt="旋转"
        @click="rotateBtn"
      />
      <button size="small" @click="saveViewState" class="save-view-btn">
        保存视角
      </button>
    </div>
    <div
      v-show="
        hoveredInfo.hoveredRowIndex !== null &&
        hoveredInfo.hoveredColIndex !== null
      "
      class="overlay"
    >
      <template v-if="hoveredSid"> 设备编号: {{ hoveredSid }} <br /> </template>
      <template v-if="hoveredInfo.hoveredFloorIndex !== null">
        当前层: {{ hoveredInfo.hoveredFloorIndex }}<br />
      </template>
      <template v-if="hoveredInfo.hoveredColIndex !== null">
        当前列: {{ hoveredInfo.hoveredColIndex }}<br />
      </template>
      <template v-if="hoveredInfo.hoveredRowIndex !== null">
        当前行: {{ hoveredInfo.hoveredRowIndex }}<br />
      </template>
      <template v-if="hoveredInfo.hoveredItemStsName !== null">
        类型: {{ hoveredInfo.hoveredItemStsName }}<br />
      </template>
      <template v-if="hoveredPalletCode">
        <span :style="{ color: 'black', fontWeight: 'bold' }">
          托盘码: {{ hoveredPalletCode }}
        </span>
        <br />
      </template>
    </div>
    <div
      :class="['cell-sel-panel-wrapper', panelPositionClass]"
      @dblclick.stop="togglePanelPosition"
    >
      <CellSelPanel
        :selectedItemArr="selectedItemArr"
        v-show="cellSelPanelVisible"
        class="cell-sel-panel-con"
        @changeIsByFloor="setCfgIsByFloor"
        @onCellSelItemClick="onCellSelItemClick"
      />
    </div>
    <div
      v-show="showContextMenu"
      class="context-menu-grid"
      :style="{
        position: 'fixed',
        left: `${contextMenuPosition.x}px`,
        top: `${contextMenuPosition.y}px`,
        transform: 'translate(0, 0)',
      }"
    >
      <ul>
        <!-- <li @click="saveCanvasAsImage">保存为图片</li> -->
        <li @click="handleMenuClick('chgPalletCode')">修改托盘码</li>
        <li @click="handleMenuClick('copyPalletCode')">复制托盘码</li>
      </ul>
    </div>
    <el-dialog
      :visible.sync="showChgPalletCodeDia"
      title="修改托盘码"
      width="60%"
      class="pallet-code-dialog"
    >
      <el-form :model="chgPalletCodeDiaData" label-width="100px">
        <el-form-item label="坐标">
          {{ chgPalletCodeDiaData.f }}-{{ chgPalletCodeDiaData.c }}-{{
            chgPalletCodeDiaData.r
          }}
        </el-form-item>
        <el-form-item label="托盘码">
          <el-input v-model="chgPalletCodeDiaData.pallet_code" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showChgPalletCodeDia = false">取 消</el-button>
        <el-button type="primary" @click="submitChgPalletCode">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import gridBaseMixin from "@/mixins/map/gridBaseMixin";
export default {
  name: "GridSvg",
  mixins: [gridBaseMixin],
};
</script>

<style lang="scss" scoped>
.svg-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.toolbar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  display: flex;
  gap: 8px;
  align-items: center;

  img {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      opacity: 0.8;
    }
  }

  .save-view-btn {
    background-color: #4caf50;
    border: none;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 添加轻微阴影
    transition: all 0.2s ease-in-out; // 优化过渡效果
    &:hover {
      background-color: #45a049; // 稍微暗一点的悬停色
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
    &:active {
      background-color: #3d8b40; // 点击时的颜色
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
  }
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  font-size: 12px;
  pointer-events: none;
}

.cell-sel-panel-wrapper {
  position: absolute;
  top: 0;
  z-index: 100;

  &.panel-right {
    right: 24px;
  }

  &.panel-left {
    left: 244px;
  }
}

.context-menu-grid {
  position: fixed;
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 5px 0;
  z-index: 1000;
  margin-top: 2px;
  margin-left: 2px;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      padding: 8px 16px;
      cursor: pointer;
      font-size: 14px;
      color: #606266;
      white-space: nowrap;

      &:hover {
        background-color: #f5f7fa;
      }
    }
  }
}
</style>