系统架构图增加点击事件

zhangwencui

2026-06-01 0d44769e1084fcc0ee148855f406ca4eea028aad

 src/views/systemArchitecture/index.vue

@@ -8,9 +8,19 @@
          <h1 class="title-text">系统架构图</h1>
        </div>
        <div class="image-wrapper">
          <img :src="architectureImg"
               alt="系统架构图"
               class="architecture-img" />
          <div class="hotspot-container">
            <img :src="architectureImg"
                 alt="系统架构图"
                 class="architecture-img" />
            <!-- 热点区域 -->
            <div v-for="spot in hotspots"
                 :key="spot.id"
                 class="hotspot"
                 :style="{ top: spot.top, left: spot.left, width: spot.width, height: spot.height }"
                 @click="handleSpotClick(spot)"
                 :title="'跳转至: ' + spot.name">
            </div>
          </div>
        </div>
      </div>
    </div>
@@ -19,7 +29,218 @@

<script setup>
  import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
  import { useRouter } from "vue-router";
  import architectureImg from "@/assets/images/xitongjiagou.svg";

  const router = useRouter();

  // 热点区域定义
  const hotspots = ref([
    {
      id: 1,
      name: "角色管理",
      top: "3%",
      left: "19%",
      width: "9%",
      height: "11%",
      path: "/system/role",
    },
    {
      id: 2,
      name: "职业管理",
      top: "1.6%",
      left: "36.5%",
      width: "9%",
      height: "11%",
      path: "/system/user",
    },
    {
      id: 3,
      name: "岗位管理",
      top: "1.6%",
      left: "56%",
      width: "9%",
      height: "11%",
      path: "/system/post",
    },
    {
      id: 4,
      name: "部门管理",
      top: "3%",
      left: "73%",
      width: "9%",
      height: "11%",
      path: "/system/dept",
    },
    {
      id: 5,
      name: "客户档案",
      top: "42%",
      left: "17%",
      width: "9%",
      height: "3%",
      path: "/salesManagement/customerFileOpenSea",
    },
    {
      id: 6,
      name: "销售报价",
      top: "46%",
      left: "17%",
      width: "9%",
      height: "3%",
      path: "/salesManagement/salesQuotation",
    },
    {
      id: 7,
      name: "销售台账",
      top: "51%",
      left: "17%",
      width: "9%",
      height: "3%",
      path: "/salesManagement/salesLedger",
    },
    {
      id: 8,
      name: "发货台账",
      top: "55%",
      left: "17%",
      width: "9%",
      height: "3%",
      path: "/salesManagement/deliveryLedger",
    },
    {
      id: 9,
      name: "销售退货",
      top: "59%",
      left: "17%",
      width: "9%",
      height: "3%",
      path: "/salesManagement/returnOrder",
    },
    {
      id: 10,
      name: "供应商档案",
      top: "42%",
      left: "75%",
      width: "9%",
      height: "3%",
      path: "/salesManagement/customerFileOpenSea",
    },
    {
      id: 11,
      name: "采购台账",
      top: "47%",
      left: "75%",
      width: "9%",
      height: "3%",
      path: "/procurementManagement/procurementLedger",
    },
    {
      id: 12,
      name: "采购退货",
      top: "51%",
      left: "75%",
      width: "9%",
      height: "3%",
      path: "/procurementManagement/purchaseReturnOrder",
    },
    {
      id: 13,
      name: "供应商往来",
      top: "56%",
      left: "75%",
      width: "9%",
      height: "3%",
      path: "/procurementManagement/paymentLedger",
    },
    {
      id: 14,
      name: "采购报表",
      top: "60%",
      left: "75%",
      width: "9%",
      height: "3%",
      path: "/procurementManagement/procurementReport",
    },
    {
      id: 15,
      name: "生产排产",
      top: "77%",
      left: "19%",
      width: "15%",
      height: "3%",
      path: "/productionManagement/productionManagement/workOrderEdit/index",
    },
    {
      id: 16,
      name: "生产订单",
      top: "76%",
      left: "43%",
      width: "15%",
      height: "3%",
      path: "/productionManagement/productionOrder",
    },
    {
      id: 17,
      name: "bom",
      top: "77%",
      left: "70%",
      width: "15%",
      height: "3%",
      path: "/processDesign/productionManagement/productStructure/index",
    },
    {
      id: 18,
      name: "生产订单",
      top: "82%",
      left: "32%",
      width: "15%",
      height: "3%",
      path: "/productionManagement/productionOrder",
    },
    {
      id: 19,
      name: "工艺路线",
      top: "82%",
      left: "57%",
      width: "15%",
      height: "3%",
      path: "/processDesign/processRoute",
    },
    {
      id: 20,
      name: "工序",
      top: "87%",
      left: "17%",
      width: "9%",
      height: "4%",
      path: "/processDesign/productionManagement/productionProcess/index",
    },
    {
      id: 21,
      name: "生产报工",
      top: "89%",
      left: "32%",
      width: "17%",
      height: "4%",
      path: "/productionManagement/workOrderManagement",
    },
    {
      id: 22,
      name: "生产核算",
      top: "89%",
      left: "56%",
      width: "19%",
      height: "4%",
      path: "/productionManagement/productionCosting",
    },
  ]);

  const handleSpotClick = spot => {
    if (spot.path) {
      router.push(spot.path);
    }
  };

  // 缩放比例
  const scaleRatio = ref(1);
@@ -127,10 +348,31 @@
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

      .architecture-img {
      .hotspot-container {
        position: relative;
        display: inline-block;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;

        .architecture-img {
          display: block;
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
        }

        .hotspot {
          position: absolute;
          cursor: pointer;
          background: rgba(64, 158, 255, 0);
          transition: background 0.3s;
          border-radius: 4px;

          // &:hover {
          //   background: rgba(64, 158, 255, 0.15);
          //   box-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
          // }
        }
      }
    }
  }