src/views/monitor/operlog/index.vue

@@ -165,10 +165,10 @@
               <el-col :span="24">

                  <el-form-item label="操作方法：">{{ form.method }}</el-form-item>

               </el-col>

               <el-col :span="24">

               <el-col :span="24" v-if="form.status === 1">

                  <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>

               </el-col>

               <el-col :span="24">

               <el-col :span="24" v-if="form.status === 1">

                  <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>

               </el-col>

               <el-col :span="8">


 src/views/reportAnalysis/reportManagement/index.vue

@@ -1001,6 +1001,7 @@
  };

  // 生命周期
  let resizeObserver = null;
  onMounted(() => {
    // 计算初始缩放比例
    nextTick(() => {
@@ -1022,10 +1023,22 @@
    });
    // 监听窗口大小变化，重新调整图表大小
    window.addEventListener("resize", handleResize);

    // 使用 ResizeObserver 监听容器尺寸变化（解决侧边栏切换问题）
    const container = document.querySelector(".scale-container");
    if (container && window.ResizeObserver) {
      resizeObserver = new ResizeObserver(() => {
        handleResize();
      });
      resizeObserver.observe(container);
    }
  });

  onBeforeUnmount(() => {
    window.removeEventListener("resize", handleResize);
    if (resizeObserver) {
      resizeObserver.disconnect();
    }
  });
</script>


 src/views/systemArchitecture/index.vue

@@ -1,16 +1,32 @@
<template>
  <div class="scale-container">
    <div class="architecture-scaling-container"
         :style="{ transform: `scale(${scaleRatio})` }">
      <div class="architecture-container">
        <div class="header">
          <span class="title-bar"></span>
          <h1 class="title-text">系统架构图</h1>
        </div>
        <div class="image-wrapper">
          <img :src="architectureImg"
               alt="系统架构图"
               class="architecture-img" />
    <div class="scroll-content"
         :style="{ 
           height: `${designHeight * scaleRatio}px`,
           width: `${designWidth * scaleRatio}px` 
         }">
      <div class="architecture-scaling-container"
           :style="{ transform: `scale(${scaleRatio})` }">
        <div class="architecture-container">
          <div class="header">
            <span class="title-bar"></span>
            <h1 class="title-text">系统架构图</h1>
          </div>
          <div class="image-wrapper">
            <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>
    </div>
@@ -19,7 +35,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);
@@ -34,16 +261,18 @@

    // 获取容器的实际尺寸
    const containerWidth = container.clientWidth;
    const containerHeight = container.clientHeight;

    if (containerWidth === 0) {
    if (containerWidth === 0 || containerHeight === 0) {
      // 如果还没渲染出来，延迟一下再计算
      setTimeout(calculateScale, 100);
      return;
    }

    // 计算宽度缩放比例，使其始终占满宽度
    // 计算缩放比例，取宽高比例中的较大值，确保始终撑满整个容器
    const scaleX = containerWidth / designWidth;
    scaleRatio.value = scaleX;
    const scaleY = containerHeight / designHeight;
    scaleRatio.value = Math.max(scaleX, scaleY);
  };

  // 窗口大小变化处理
@@ -52,6 +281,7 @@
  };

  // 生命周期
  let resizeObserver = null;
  onMounted(() => {
    // 计算初始缩放比例
    nextTick(() => {
@@ -60,10 +290,22 @@

    // 监听窗口大小变化
    window.addEventListener("resize", handleResize);

    // 使用 ResizeObserver 监听容器尺寸变化（解决侧边栏切换问题）
    const container = document.querySelector(".scale-container");
    if (container && window.ResizeObserver) {
      resizeObserver = new ResizeObserver(() => {
        calculateScale();
      });
      resizeObserver.observe(container);
    }
  });

  onBeforeUnmount(() => {
    window.removeEventListener("resize", handleResize);
    if (resizeObserver) {
      resizeObserver.disconnect();
    }
  });
</script>

@@ -73,11 +315,21 @@
    width: 100%;
    height: calc(100vh - 84px);
    background-color: #f5f7fa;
    overflow: hidden;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .scroll-content {
    position: relative;
    flex-shrink: 0;
  }

  .architecture-scaling-container {
    position: relative;
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 980px;
    transform-origin: left top;
@@ -127,10 +379,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);
          // }
        }
      }
    }
  }