#

Junjie

昨天 470f9f005ab52e75907d5b1051ec748f445dfc11

#

 src/main/webapp/components/MapCanvas.js

@@ -20,12 +20,13 @@
           :style="shelfTooltipStyle()">
        {{ shelfTooltip.text }}
      </div>
      <div style="position: absolute; top: 20px; right: 50px; text-align: right;">
        <div>FPS:{{mapFps}}</div>
        <div style="margin-top: 6px; display: flex; gap: 6px; justify-content: flex-end;">
          <button type="button" @click="toggleStationDirection" style="padding: 2px 8px; font-size: 12px; cursor: pointer;">{{ showStationDirection ? '隐藏站点方向' : '显示站点方向' }}</button>
          <button type="button" @click="rotateMap" style="padding: 2px 8px; font-size: 12px; cursor: pointer;">旋转</button>
          <button type="button" @click="toggleMirror" style="padding: 2px 8px; font-size: 12px; cursor: pointer;">{{ mapMirrorX ? '取消镜像' : '镜像' }}</button>
      <div style="position: absolute; top: 18px; right: 34px; z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;">
        <div :style="mapToolFpsStyle()">FPS {{ mapFps }}</div>
        <button type="button" @click="toggleMapToolPanel" :style="mapToolToggleStyle(showMapToolPanel)">{{ showMapToolPanel ? '收起操作' : '地图操作' }}</button>
        <div v-show="showMapToolPanel" :style="mapToolBarStyle()">
          <button type="button" @click="toggleStationDirection" :style="mapToolButtonStyle(showStationDirection)">{{ showStationDirection ? '隐藏站点方向' : '显示站点方向' }}</button>
          <button type="button" @click="rotateMap" :style="mapToolButtonStyle(false)">旋转</button>
          <button type="button" @click="toggleMirror" :style="mapToolButtonStyle(mapMirrorX)">{{ mapMirrorX ? '取消镜像' : '镜像' }}</button>
        </div>
      </div>
    </div>
@@ -105,6 +106,7 @@
        taskStationCount: 0,
        currentLoad: 0
      },
      showMapToolPanel: false,
      showStationDirection: false,
      hoverLoopNo: null,
      hoverLoopStationIdSet: new Set(),
@@ -190,6 +192,68 @@
    }
  },
  methods: {
    mapToolBarStyle() {
      return {
        display: 'flex',
        gap: '8px',
        alignItems: 'center',
        padding: '7px',
        borderRadius: '14px',
        background: 'rgba(255, 255, 255, 0.72)',
        border: '1px solid rgba(160, 180, 205, 0.3)',
        boxShadow: '0 8px 20px rgba(37, 64, 97, 0.08)',
        backdropFilter: 'blur(4px)'
      };
    },
    mapToolFpsStyle() {
      return {
        padding: '4px 10px',
        borderRadius: '999px',
        background: 'rgba(255, 255, 255, 0.7)',
        border: '1px solid rgba(160, 180, 205, 0.28)',
        color: '#48617c',
        fontSize: '12px',
        lineHeight: '18px',
        letterSpacing: '0.04em',
        boxShadow: '0 6px 16px rgba(37, 64, 97, 0.06)'
      };
    },
    mapToolToggleStyle(active) {
      return {
        appearance: 'none',
        border: '1px solid ' + (active ? 'rgba(96, 132, 170, 0.36)' : 'rgba(160, 180, 205, 0.3)'),
        background: active ? 'rgba(235, 243, 251, 0.96)' : 'rgba(255, 255, 255, 0.82)',
        color: '#46617b',
        height: '30px',
        padding: '0 12px',
        borderRadius: '999px',
        fontSize: '12px',
        lineHeight: '30px',
        cursor: 'pointer',
        whiteSpace: 'nowrap',
        boxShadow: '0 6px 16px rgba(37, 64, 97, 0.06)'
      };
    },
    mapToolButtonStyle(active) {
      return {
        appearance: 'none',
        border: '1px solid ' + (active ? 'rgba(255, 136, 93, 0.38)' : 'rgba(160, 180, 205, 0.3)'),
        background: active ? 'rgba(255, 119, 77, 0.16)' : 'rgba(255, 255, 255, 0.88)',
        color: active ? '#d85a31' : '#4d647d',
        height: '30px',
        padding: '0 12px',
        borderRadius: '10px',
        fontSize: '12px',
        lineHeight: '30px',
        cursor: 'pointer',
        transition: 'all 0.2s ease',
        boxShadow: active ? '0 4px 10px rgba(255, 119, 77, 0.12)' : 'none',
        whiteSpace: 'nowrap'
      };
    },
    toggleMapToolPanel() {
      this.showMapToolPanel = !this.showMapToolPanel;
    },
    createMap() {
      this.pixiApp = new PIXI.Application({ backgroundColor: 0xF5F7F9, antialias: false, powerPreference: 'high-performance', autoDensity: true, resolution: Math.min(window.devicePixelRatio || 1, 2) });
      PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.LINEAR;
@@ -2161,9 +2225,6 @@
    }
  }
});