leiting-bim 2.1.35 → 2.1.37

package/plugins/plugins/cesium-vue/src/components/path-roam/src/PathRoam.vue

@@ -0,0 +1,429 @@
+<template>
+  <div v-show="isVisible" :class="bem.b('box')">
+    <div :class="bem.be('box', 'header')">
+      <span>🛤️ 路径漫游</span>
+      <div style="cursor: pointer" @click="open(false)">✖</div>
+    </div>
+
+    <div :class="bem.be('box', 'content')">
+      <!-- Route Management -->
+      <div :class="bem.be('box', 'section')">
+        <div :class="bem.be('box', 'title')">路线管理</div>
+        <div :class="bem.be('box', 'group')">
+          <div :class="bem.be('box', 'route-row')">
+            <select v-model="activeRouteId" :class="bem.be('box', 'select')">
+              <option v-for="route in routes" :key="route.id" :value="route.id">
+                {{ route.name }}
+              </option>
+            </select>
+            <button
+              :class="[bem.be('box', 'btn'), 'primary', 'mini']"
+              @click="addRoute"
+              title="新建路线"
+              >+</button
+            >
+            <button
+              :class="[bem.be('box', 'btn'), 'danger', 'mini']"
+              @click="deleteRoute"
+              :disabled="routes.length <= 1"
+              title="删除路线"
+              >-</button
+            >
+          </div>
+          <label>路线名称</label>
+          <input type="text" v-model="currentRoute.name" />
+        </div>
+      </div>
+
+      <!-- Parameter Configuration -->
+      <div :class="bem.be('box', 'section')">
+        <div :class="bem.be('box', 'title')">参数配置</div>
+
+        <div :class="bem.be('box', 'group')">
+          <label>速度 (speed)</label>
+          <input type="number" v-model.number="currentRoute.speed" min="1" />
+        </div>
+        <div :class="bem.be('box', 'row')">
+          <label :class="bem.be('box', 'checkbox')">
+            <input type="checkbox" v-model="currentRoute.showPath" />
+            <span>显示路径 (showPath)</span>
+          </label>
+        </div>
+        <div :class="bem.be('box', 'section')">
+          <div :class="bem.be('box', 'title')">初始视角</div>
+          <div :class="bem.be('box', 'row')">
+            <button :class="[bem.be('box', 'btn'), 'primary']" style="flex: 1" @click="captureView">
+              📷 捕获当前视角
+            </button>
+            <button
+              :class="[bem.be('box', 'btn'), 'danger', 'icon']"
+              title="清除视角"
+              @click="clearView"
+            >
+              ✖
+            </button>
+          </div>
+          <div style="font-size: 11px; color: #9ca3af; margin-top: 4px">
+            {{ viewStatus }}
+          </div>
+        </div>
+      </div>
+      <div :class="bem.be('box', 'section')">
+        <div :class="bem.be('box', 'title')">漫游操作</div>
+        <div :class="[bem.be('box', 'row')]">
+          <button
+            :class="[bem.be('box', 'btn'), 'primary']"
+            style="width: 100%; margin-top: 8px"
+            @click="startDraw"
+          >
+            ✏️ 绘制路径
+          </button>
+        </div>
+      </div>
+      <!-- Roaming Operations -->
+      <div :class="bem.be('box', 'section')">
+        <div :class="bem.be('box', 'title')">漫游操作</div>
+        <div :class="[bem.be('box', 'row'), bem.be('box', 'grid-2')]">
+          <button
+            :class="[bem.be('box', 'btn'), 'primary', 'icon']"
+            title="开始/暂停"
+            @click="togglePlay"
+          >
+            {{ isRoaming && !isPaused ? '⏸' : '▶' }}
+          </button>
+          <button
+            :class="[bem.be('box', 'btn'), 'danger', 'icon']"
+            title="结束"
+            @click="endRoaming"
+          >
+            ⏹
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div :class="bem.be('box', 'status')">
+      <span
+        >状态: <span class="value">{{ statusText }}</span></span
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onUnmounted, shallowRef, computed, watch } from 'vue';
+  import { createNamespace, prefix } from '@report-components/utils/create';
+  import { pathRoamProps } from './pathRoam';
+  import { PathRoamTool, DrawTool } from '@report-components/cesium-core';
+
+  defineOptions({ name: `${prefix}-path-roam` });
+  const props = defineProps(pathRoamProps);
+  const emit = defineEmits(['update:visible', 'save']);
+  const bem = createNamespace('path-roam');
+
+  // State
+  const isVisible = ref(false);
+  const isRoaming = ref(false);
+  const isPaused = ref(false);
+  const statusText = ref('就绪');
+  const viewStatus = ref('未配置');
+
+  // Routes Management
+  interface Route {
+    id: string;
+    name: string;
+    positions: any[] | null;
+    initialView: any;
+    speed: number;
+    modelUrl: string;
+    modelScale: number;
+    showPath: boolean;
+  }
+
+  const getDefaultRouteConfig = () => ({
+    speed: props.defaultSpeed,
+    modelUrl: props.defaultModelUrl,
+    modelScale: props.defaultModelScale,
+    showPath: true,
+  });
+
+  const routes = ref<Route[]>([
+    { id: '1', name: '路线 1', positions: null, initialView: null, ...getDefaultRouteConfig() },
+  ]);
+  const activeRouteId = ref('1');
+
+  const currentRoute = computed(() => {
+    return routes.value.find((r) => r.id === activeRouteId.value) || routes.value[0];
+  });
+
+  // Tools
+  const pathRoam = shallowRef<PathRoamTool | null>(null);
+  const drawTool = shallowRef<DrawTool | null>(null);
+  const cesiumInstance = shallowRef<any>(props.Cesium);
+  const viewerInstance = shallowRef<any>(props.viewer);
+
+  // Init
+  const init = (Cesium: any, viewer: any, options: any = {}) => {
+    if (!Cesium || !viewer) return;
+    cesiumInstance.value = Cesium;
+    viewerInstance.value = viewer;
+
+    // Merge options
+    if (options.modelUrl) currentRoute.value.modelUrl = options.modelUrl;
+    if (options.modelScale !== undefined) currentRoute.value.modelScale = options.modelScale;
+
+    pathRoam.value = new PathRoamTool({ Cesium, viewer });
+    drawTool.value = new DrawTool(Cesium, viewer);
+
+    updateViewStatus();
+  };
+
+  const open = (visible: boolean = true) => {
+    isVisible.value = visible;
+    emit('update:visible', visible);
+  };
+
+  const getConfig = () => {
+    return {
+      activeRouteId: activeRouteId.value,
+      routes: routes.value.map((r) => ({
+        ...r,
+        positions: r.positions ? [...r.positions] : null,
+        initialView: r.initialView ? { ...r.initialView } : null,
+      })),
+    };
+  };
+
+  const setConfig = (config: any) => {
+    if (!config) return;
+
+    // New format
+    if (Array.isArray(config.routes)) {
+      routes.value = config.routes.map((r: any) => ({
+        id: r.id,
+        name: r.name,
+        positions: r.positions ? [...r.positions] : null,
+        initialView: r.initialView ? { ...r.initialView } : null,
+        speed: r.speed ?? props.defaultSpeed,
+        modelUrl: r.modelUrl ?? props.defaultModelUrl,
+        modelScale: r.modelScale ?? props.defaultModelScale,
+        showPath: r.showPath ?? true,
+      }));
+      if (routes.value.length === 0) {
+        routes.value = [
+          {
+            id: '1',
+            name: '路线 1',
+            positions: null,
+            initialView: null,
+            ...getDefaultRouteConfig(),
+          },
+        ];
+      }
+
+      if (config.activeRouteId && routes.value.find((r) => r.id === config.activeRouteId)) {
+        activeRouteId.value = config.activeRouteId;
+      } else {
+        activeRouteId.value = routes.value[0].id;
+      }
+    }
+    // Legacy support
+    else if (config.customPositions || config.initialViewConfig) {
+      const legacySpeed = typeof config.speed === 'number' ? config.speed : props.defaultSpeed;
+      const legacyModelUrl = config.modelUrl ?? props.defaultModelUrl;
+      const legacyModelScale =
+        typeof config.modelScale === 'number' ? config.modelScale : props.defaultModelScale;
+      const legacyShowPath = typeof config.showPath === 'boolean' ? config.showPath : true;
+
+      routes.value = [
+        {
+          id: '1',
+          name: '默认路线',
+          positions: config.customPositions || null,
+          initialView: config.initialViewConfig || null,
+          speed: legacySpeed,
+          modelUrl: legacyModelUrl,
+          modelScale: legacyModelScale,
+          showPath: legacyShowPath,
+        },
+      ];
+      activeRouteId.value = '1';
+    }
+
+    updateViewStatus();
+  };
+
+  const handleSave = () => {
+    emit('save', getConfig());
+  };
+
+  const updateViewStatus = () => {
+    const view = currentRoute.value.initialView;
+    if (!view) {
+      viewStatus.value = '未配置';
+      return;
+    }
+    const c = view.destination;
+    if (cesiumInstance.value) {
+      const h = cesiumInstance.value.Math.toDegrees(view.orientation.heading).toFixed(1);
+      const p = cesiumInstance.value.Math.toDegrees(view.orientation.pitch).toFixed(1);
+      viewStatus.value = `Pos: [${c.x.toFixed(0)}, ${c.y.toFixed(0)}, ${c.z.toFixed(0)}]\nHPR: [${h}, ${p}, 0]`;
+    } else {
+      viewStatus.value = `Pos: [${c.x.toFixed(0)}, ${c.y.toFixed(0)}, ${c.z.toFixed(0)}]`;
+    }
+  };
+
+  watch(
+    () => activeRouteId.value,
+    () => {
+      updateViewStatus();
+      if (currentRoute.value.positions) {
+        statusText.value = '已加载配置路径';
+      } else {
+        statusText.value = '未配置路径';
+      }
+    },
+  );
+
+  // Methods
+  const captureView = () => {
+    if (!viewerInstance.value || !cesiumInstance.value) return;
+    const camera = viewerInstance.value.camera;
+    currentRoute.value.initialView = {
+      destination: camera.position.clone(),
+      orientation: {
+        heading: camera.heading,
+        pitch: camera.pitch,
+        roll: camera.roll,
+      },
+    };
+    updateViewStatus();
+  };
+
+  const clearView = () => {
+    currentRoute.value.initialView = null;
+    updateViewStatus();
+  };
+
+  const startDraw = () => {
+    if (!drawTool.value || !pathRoam.value) return;
+
+    pathRoam.value.clear();
+    statusText.value = '请在地图上绘制路径 (左键点击，双击结束)';
+
+    drawTool.value.draw('line', {
+      onComplete: (result: any) => {
+        console.log('绘制完成，结果:', result);
+        // Convert to format [lon, lat, height]
+        currentRoute.value.positions = result.lnglats.map((p: any) => [p.lng, p.lat, p.height]);
+
+        if (drawTool.value) drawTool.value.clear();
+
+        statusText.value = '路径已绘制，请点击"开始"';
+      },
+    });
+  };
+
+  const togglePlay = () => {
+    if (!pathRoam.value || !viewerInstance.value || !cesiumInstance.value) return;
+
+    if (!isRoaming.value) {
+      // Start
+      let positions = currentRoute.value.positions;
+      if (!positions) {
+        const defaultPositions = [
+          [116.391, 39.907, 0],
+          [116.397, 39.909, 0],
+          [116.404, 39.915, 0],
+          [116.41, 39.92, 0],
+          [116.418, 39.925, 0],
+        ];
+        positions = defaultPositions;
+        // Don't save default to currentRoute unless user wants?
+        // User code saved it to customPositions before.
+        currentRoute.value.positions = positions;
+      }
+
+      statusText.value = '漫游中';
+
+      pathRoam.value.start({
+        positions: positions,
+        speed: currentRoute.value.speed,
+        loop: false,
+        clampToGround: false,
+        followCamera: true,
+        showPath: currentRoute.value.showPath,
+        pathColor: cesiumInstance.value.Color.CYAN,
+        pathWidth: 3,
+        pointColor: cesiumInstance.value.Color.ORANGE,
+        pointPixelSize: 8,
+        modelUrl: currentRoute.value.modelUrl || undefined,
+        modelScale: currentRoute.value.modelScale,
+        initialView: currentRoute.value.initialView,
+        onComplete: () => {
+          statusText.value = '完成';
+          isRoaming.value = false;
+          isPaused.value = false;
+        },
+      });
+
+      isRoaming.value = true;
+    } else {
+      // Pause/Resume
+      const shouldAnimate = viewerInstance.value.clock.shouldAnimate;
+      if (shouldAnimate) {
+        viewerInstance.value.clock.shouldAnimate = false;
+        statusText.value = '已暂停';
+        isPaused.value = true;
+      } else {
+        viewerInstance.value.clock.shouldAnimate = true;
+        statusText.value = '漫游中';
+        isPaused.value = false;
+      }
+    }
+  };
+
+  const endRoaming = () => {
+    if (!pathRoam.value || !drawTool.value) return;
+    pathRoam.value.clear();
+    drawTool.value.clear();
+    statusText.value = '已结束';
+    isRoaming.value = false;
+    isPaused.value = false;
+  };
+
+  const addRoute = () => {
+    const id = Date.now().toString();
+    routes.value.push({
+      id,
+      name: `路线 ${routes.value.length + 1}`,
+      positions: null,
+      initialView: null,
+      ...getDefaultRouteConfig(),
+    });
+    activeRouteId.value = id;
+  };
+
+  const deleteRoute = () => {
+    if (routes.value.length <= 1) return;
+    const idx = routes.value.findIndex((r) => r.id === activeRouteId.value);
+    if (idx !== -1) {
+      routes.value.splice(idx, 1);
+      activeRouteId.value = routes.value[Math.max(0, idx - 1)].id;
+    }
+  };
+
+  // Lifecycle
+  onUnmounted(() => {
+    if (pathRoam.value) {
+      pathRoam.value.clear();
+      pathRoam.value = null;
+    }
+    if (drawTool.value) {
+      drawTool.value.clear();
+      drawTool.value = null;
+    }
+  });
+
+  defineExpose({ init, open, getConfig, setConfig, tool: pathRoam });
+</script>

package/plugins/plugins/cesium-vue/src/components/path-roam/src/pathRoam.ts

@@ -0,0 +1,28 @@
+import { PropType } from 'vue';
+
+export const pathRoamProps = {
+  Cesium: {
+    type: Object as PropType<any>,
+    required: false,
+  },
+  viewer: {
+    type: Object as PropType<any>,
+    required: false,
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  defaultSpeed: {
+    type: Number,
+    default: 20,
+  },
+  defaultModelUrl: {
+    type: String,
+    default: '',
+  },
+  defaultModelScale: {
+    type: Number,
+    default: 1.0,
+  }
+} as const;

package/plugins/plugins/cesium-vue/src/components/test/CardMarker.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="CardMarker-wrap">
+    <div class="CardMarker-inner">
+      <div class="CardMarker-content">
+        <div class="Card-content-item">
+          <template v-if="computedData?.type == 'text'">
+            <div class="Card-item--text" v-html="computedData.content || ''"></div>
+          </template>
+          <template v-else-if="computedData?.type == 'iframe'">
+            <iframe :src="computedData.src" class="Card-item--iframe" frameborder="0"></iframe>
+          </template>
+          <template v-else-if="computedData?.type == 'img'">
+            <img :src="computedData.src" alt="" class="Card-item--img" />
+          </template>
+          <template v-else-if="computedData?.type == 'video'">
+            <video class="Card-item--video" controls>
+              <source :src="computedData.src" type="video/mp4" />
+              <source :src="computedData.src" type="video/webm" />
+              <source :src="computedData.src" type="video/ogg" />
+              您的浏览器不支持 HTML5 视频标签。
+            </video>
+          </template>
+        </div>
+        <div class="Card-content-tabs" v-if="props.data?.length > 1">
+          <div
+            v-for="(tab, index) in props.data"
+            :key="index"
+            @click="activeTab(index)"
+            class="Card-content-tab"
+            :class="{ active: activeIndex == index }"
+          >
+            {{ tab.title }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, computed } from 'vue';
+  import { prefix } from '@report-components/utils/create';
+  defineOptions({ name: `${prefix}-card-marker` });
+  let props = defineProps({ data: Object });
+  const activeIndex = ref<number | string>(0);
+  const computedData = computed(() => {
+    return props?.data?.[activeIndex.value || 0] || {};
+  });
+
+  function activeTab(index: number | string) {
+    activeIndex.value = index;
+  }
+</script>
+
+<style scoped lang="less">
+  .CardMarker-wrap {
+    width: 682px;
+    height: 445px;
+    position: relative;
+
+    .CardMarker-inner {
+      width: 682px;
+      height: 445px;
+      background-image: url('../../assets/img/Card3-BG.png');
+      background-size: 100% 100%;
+      padding: 17px 4px 6px 90px;
+      background-repeat: no-repeat;
+      display: flex;
+      color: #fff;
+      border: none !important;
+      position: relative;
+      background-color: transparent;
+      &::after {
+        content: '';
+        width: calc(100%);
+        z-index: -1;
+        height: 100%;
+        position: absolute;
+        top: 2px;
+        left: 78px;
+        background: #0c203380;
+        backdrop-filter: blur(6px);
+        clip-path: path(
+          'M15.57-1,473.558,0l11.992,10.395,107.647.49,7.162,7.365L602,426.737l-13.925,14H14.173L0,426.479V15.039Z'
+        );
+      }
+      .CardMarker-content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+
+        .Card-content-item {
+          width: 100%;
+          height: 100%;
+          flex: 1;
+          .Card-item--text {
+            overflow: auto;
+            height: 100%;
+          }
+          .Card-item--iframe {
+            width: 100%;
+            height: 100%;
+          }
+          .Card-item--video {
+            width: 100%;
+            height: 100%;
+            background: #000;
+          }
+          .Card-item--img {
+            width: 100%;
+            height: 100%;
+            background-size: 100% 100%;
+          }
+        }
+        .Card-content-tabs {
+          width: 115px;
+          height: 100%;
+          overflow: auto;
+          padding: 8px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          background-color: #0c203380;
+          clip-path: polygon(0 0, 105px 0, 111px 6px, 111px 409px, 100px 422px, 0 420px);
+          .Card-content-tab {
+            cursor: pointer;
+            padding: 8px 12px;
+            margin: 4px 0;
+            border-radius: 4px;
+            transition: all 0.3s ease;
+            color: #d4d4d4; // 默认文字颜色（浅灰）
+            background: transparent;
+
+            &:hover {
+              background: rgba(255, 215, 0, 0.1); // 悬停时微金色透出
+            }
+
+            &.active {
+              background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+              color: #ffd700; // 金色文字
+              font-weight: 600;
+              border: 1px solid rgba(255, 215, 0, 0.3); // 金色描边
+              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 215, 0, 0.1); // 内发光效果
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

package/plugins/plugins/cesium-vue/src/components/test/CesiumMarker.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="cesium-marker">
+    <div class="marker-image" v-if="img">
+      <img :src="img" alt="marker" />
+    </div>
+    <div class="marker-name" :style="nameStyle">
+      {{ name }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { CSSProperties } from 'vue';
+  import { prefix } from '@report-components/utils/create';
+  defineOptions({ name: `${prefix}-cesium-marker` });
+  defineProps<{
+    data: Object;
+    name: string;
+    nameStyle?: CSSProperties;
+    img?: string;
+  }>();
+</script>
+
+<style scoped>
+  .cesium-marker {
+    position: relative;
+    width: max-content;
+  }
+  .marker-image img {
+    user-drag: none; /* 非标准属性，Chrome/Safari 支持 */
+    -webkit-user-drag: none;
+    user-select: none; /* 防止选择 */
+  }
+</style>