leiting-bim 2.1.35 → 2.1.37

package/plugins/plugins/cesium-vue/src/components/camera-roam/src/CameraRoam.vue

@@ -0,0 +1,434 @@
+<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>
+
+      <!-- Parameters -->
+      <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', 'group')">
+          <div :class="bem.be('box', 'row')">
+            <label :class="bem.be('box', 'checkbox')">
+              <input type="checkbox" v-model="currentRoute.showPath" />
+              <span>显示路径</span>
+            </label>
+            <label :class="bem.be('box', 'checkbox')">
+              <input type="checkbox" v-model="currentRoute.showStops" />
+              <span>显示视点</span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <!-- Playback -->
+      <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"
+          >
+            {{ isPlaying && !isPaused ? '⏸' : '▶' }}
+          </button>
+          <button :class="[bem.be('box', 'btn'), 'danger', 'icon']" title="停止" @click="stopPlay">
+            ⏹
+          </button>
+        </div>
+      </div>
+
+      <!-- Viewpoint Management -->
+      <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%"
+            @click="saveCurrentView"
+          >
+            📸 保存当前视角
+          </button>
+        </div>
+
+        <ul :class="bem.be('box', 'list')">
+          <li
+            v-if="currentRoute.waypoints.length === 0"
+            style="padding: 10px; text-align: center; color: #666"
+          >
+            暂无视点
+          </li>
+          <li
+            v-for="(point, index) in currentRoute.waypoints"
+            :key="index"
+            :class="bem.be('box', 'item')"
+            @click="previewView(point)"
+          >
+            <div class="info" title="点击预览">
+              <span style="font-weight: 600">视点 {{ index + 1 }}</span>
+              <span style="font-size: 10px; color: #999">
+                [{{ point.destination.x.toFixed(0) }}, {{ point.destination.y.toFixed(0) }}]
+              </span>
+            </div>
+            <div class="actions">
+              <button class="del-btn" @click.stop="removeView(index)">删除</button>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div :class="bem.be('box', 'status')">
+      <span
+        >状态: <span class="value">{{ statusText }}</span></span
+      >
+      <span>视点: {{ currentRoute.waypoints.length }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch, onUnmounted, shallowRef, computed } from 'vue';
+  import { createNamespace, prefix } from '@report-components/utils/create';
+  import { cameraRoamProps } from './cameraRoam';
+  import { CameraRoamTool } from '@report-components/cesium-core';
+
+  defineOptions({ name: `${prefix}-camera-roam` });
+  const props = defineProps(cameraRoamProps);
+  const emit = defineEmits(['update:visible', 'save']);
+
+  const bem = createNamespace('camera-roam');
+
+  // State
+  const isVisible = ref(props.visible);
+  const isPlaying = ref(false);
+  const isPaused = ref(false);
+  const statusText = ref('就绪');
+
+  // Routes Management
+  interface Route {
+    id: string;
+    name: string;
+    waypoints: any[];
+    speed: number;
+    modelUrl: string;
+    modelScale: number;
+    showPath: boolean;
+    showStops: boolean;
+  }
+
+  const getDefaultRouteConfig = () => ({
+    speed: props.defaultSpeed,
+    modelUrl: props.defaultModelUrl,
+    modelScale: props.defaultModelScale,
+    showPath: true,
+    showStops: true,
+  });
+
+  const routes = ref<Route[]>([
+    { id: '1', name: '路线 1', waypoints: [], ...getDefaultRouteConfig() },
+  ]);
+  const activeRouteId = ref('1');
+
+  const currentRoute = computed(() => {
+    return routes.value.find((r) => r.id === activeRouteId.value) || routes.value[0];
+  });
+
+  const tool = shallowRef<CameraRoamTool | null>(null);
+  const cesiumInstance = shallowRef<any>(null);
+  const viewerInstance = shallowRef<any>(null);
+
+  // Visibility Control
+  watch(
+    () => props.visible,
+    (val) => {
+      isVisible.value = val;
+    },
+  );
+
+  const open = (visible: boolean = true) => {
+    isVisible.value = visible;
+    emit('update:visible', visible);
+  };
+
+  // Initialize
+  const init = (Cesium: any, viewer: any, options: any = {}) => {
+    if (!Cesium || !viewer) return;
+    cesiumInstance.value = Cesium;
+    viewerInstance.value = viewer;
+
+    // Merge options into current route
+    if (options.modelUrl) currentRoute.value.modelUrl = options.modelUrl;
+    if (options.modelScale !== undefined) currentRoute.value.modelScale = options.modelScale;
+
+    // Dispose old tool if exists
+    if (tool.value) {
+      tool.value.stop();
+      tool.value.clear();
+    }
+    tool.value = new CameraRoamTool({ Cesium, viewer });
+  };
+
+  // Configuration
+  const getConfig = () => {
+    return {
+      activeRouteId: activeRouteId.value,
+      routes: routes.value.map((r) => ({
+        ...r,
+        waypoints: [...r.waypoints],
+      })),
+    };
+  };
+
+  const setConfig = (config: any) => {
+    if (!config) return;
+
+    // Handle new format
+    if (Array.isArray(config.routes)) {
+      routes.value = config.routes.map((r: any) => ({
+        id: r.id,
+        name: r.name,
+        waypoints: [...r.waypoints],
+        speed: r.speed ?? props.defaultSpeed,
+        modelUrl: r.modelUrl ?? props.defaultModelUrl,
+        modelScale: r.modelScale ?? props.defaultModelScale,
+        showPath: r.showPath ?? true,
+        showStops: r.showStops ?? true,
+      }));
+      if (routes.value.length === 0) {
+        routes.value = [{ id: '1', name: '路线 1', waypoints: [], ...getDefaultRouteConfig() }];
+      }
+
+      if (config.activeRouteId && routes.value.find((r) => r.id === config.activeRouteId)) {
+        activeRouteId.value = config.activeRouteId;
+      } else {
+        activeRouteId.value = routes.value[0].id;
+      }
+    }
+    // Handle legacy format (flat structure)
+    else {
+      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;
+      const legacyShowStops = typeof config.showStops === 'boolean' ? config.showStops : true;
+
+      if (Array.isArray(config.waypoints)) {
+        routes.value = [
+          {
+            id: '1',
+            name: '默认路线',
+            waypoints: [...config.waypoints],
+            speed: legacySpeed,
+            modelUrl: legacyModelUrl,
+            modelScale: legacyModelScale,
+            showPath: legacyShowPath,
+            showStops: legacyShowStops,
+          },
+        ];
+        activeRouteId.value = '1';
+      }
+    }
+  };
+
+  // Watchers for preview update
+  watch(
+    () => [
+      currentRoute.value.speed,
+      currentRoute.value.modelUrl,
+      currentRoute.value.modelScale,
+      currentRoute.value.showPath,
+      currentRoute.value.showStops,
+      currentRoute.value.waypoints.length,
+      activeRouteId.value,
+    ],
+    () => {
+      updatePreview();
+    },
+    { deep: true },
+  );
+
+  const updatePreview = () => {
+    if (!tool.value || isPlaying.value) return;
+
+    const points = currentRoute.value.waypoints;
+    if (points.length < 2) {
+      tool.value.clear();
+      return;
+    }
+
+    tool.value.preview({
+      waypoints: points,
+      speed: currentRoute.value.speed,
+      modelUrl: currentRoute.value.modelUrl || undefined,
+      modelScale: currentRoute.value.modelScale,
+      modelAnimate: true,
+      showPath: currentRoute.value.showPath,
+      showStops: currentRoute.value.showStops,
+      loop: false,
+    });
+  };
+
+  const saveCurrentView = () => {
+    if (!tool.value) return;
+    const view = tool.value.captureCurrentView();
+    if (view) {
+      currentRoute.value.waypoints.push(view);
+    }
+  };
+
+  const removeView = (index: number) => {
+    if (isPlaying.value) return;
+    currentRoute.value.waypoints.splice(index, 1);
+  };
+
+  const handleSave = () => {
+    emit('save', getConfig());
+  };
+
+  const previewView = (point: any) => {
+    if (isPlaying.value || !viewerInstance.value || !cesiumInstance.value) return;
+    const viewer = viewerInstance.value;
+    const Cesium = cesiumInstance.value;
+    viewer.camera.setView({
+      destination: new Cesium.Cartesian3(
+        point.destination.x,
+        point.destination.y,
+        point.destination.z,
+      ),
+      orientation: {
+        heading: point.orientation.heading,
+        pitch: point.orientation.pitch,
+        roll: point.orientation.roll,
+      },
+    });
+  };
+
+  const togglePlay = () => {
+    if (!tool.value) return;
+
+    if (!isPlaying.value) {
+      // Start
+      const points = currentRoute.value.waypoints;
+      if (points.length < 2) {
+        alert('至少需要2个视点才能开始漫游');
+        return;
+      }
+
+      tool.value.start({
+        waypoints: points,
+        speed: currentRoute.value.speed,
+        modelUrl: currentRoute.value.modelUrl || undefined,
+        modelScale: currentRoute.value.modelScale,
+        modelAnimate: true,
+        showPath: currentRoute.value.showPath,
+        showStops: currentRoute.value.showStops,
+        loop: false,
+        onComplete: () => {
+          statusText.value = '完成';
+          isPlaying.value = false;
+          isPaused.value = false;
+        },
+      });
+
+      isPlaying.value = true;
+      statusText.value = '飞行中';
+    } else {
+      // Pause/Resume
+      if (isPaused.value) {
+        tool.value.resume();
+        isPaused.value = false;
+        statusText.value = '飞行中';
+      } else {
+        tool.value.pause();
+        isPaused.value = true;
+        statusText.value = '已暂停';
+      }
+    }
+  };
+
+  const addRoute = () => {
+    const id = Date.now().toString();
+    routes.value.push({
+      id,
+      name: `路线 ${routes.value.length + 1}`,
+      waypoints: [],
+      ...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;
+    }
+  };
+
+  const stopPlay = () => {
+    if (!tool.value) return;
+    tool.value.stop();
+    tool.value.clear();
+    isPlaying.value = false;
+    isPaused.value = false;
+    statusText.value = '已停止';
+    // Re-trigger preview if needed
+    setTimeout(updatePreview, 100);
+  };
+
+  // Lifecycle
+  onUnmounted(() => {
+    if (tool.value) {
+      tool.value.stop();
+      tool.value.clear();
+      tool.value = null;
+    }
+  });
+
+  // Expose methods and properties
+  defineExpose({
+    init,
+    open,
+    getConfig,
+    setConfig,
+    tool,
+  });
+</script>

package/plugins/plugins/cesium-vue/src/components/camera-roam/src/cameraRoam.ts

@@ -0,0 +1,28 @@
+import { PropType } from 'vue';
+
+export const cameraRoamProps = {
+  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: 500,
+  },
+  defaultModelUrl: {
+    type: String,
+    default: '',
+  },
+  defaultModelScale: {
+    type: Number,
+    default: 1.0,
+  }
+} as const;

package/plugins/plugins/cesium-vue/src/components/card-carousel/index.ts

@@ -0,0 +1,12 @@
+import { withInstall } from '@report-components/utils/with-install';
+import _CardCarousel from './src/CardCarousel.vue';
+export * from './src/cardCarousel';
+
+const CxCardCarousel = withInstall(_CardCarousel);
+export default CxCardCarousel;
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    CxCardCarousel: typeof CxCardCarousel;
+  }
+}

package/plugins/plugins/cesium-vue/src/components/card-carousel/src/CardCarousel.vue

@@ -0,0 +1,124 @@
+<template>
+  <div :class="bgClass" :style="bgStyle">
+    <!-- 内容区 -->
+    <div :class="bem.b('carousel-content')">
+      <CxCardContent
+        :class="bem.be('carousel-content', 'item')"
+        v-if="currentItem"
+        :data="currentItem"
+      />
+    </div>
+
+    <!-- 左箭头 -->
+    <button
+      v-if="arrowConfig.show && data.length > 1"
+      :class="[bem.be('carousel', 'btn'), bem.be('carousel', 'arrow__left')]"
+      @click="prevPage"
+      :style="arrowStyle"
+    >
+      ◀
+    </button>
+
+    <!-- 右箭头 -->
+    <button
+      v-if="arrowConfig.show && data.length > 1"
+      :class="[bem.be('carousel', 'btn'), bem.be('carousel', 'arrow__right')]"
+      @click="nextPage"
+      :style="arrowStyle"
+    >
+      ▶
+    </button>
+
+    <!-- 标题 -->
+    <div v-if="titleConfig.show" :class="bem.be('carousel', 'title')" :style="titleStyle">
+      {{ currentItem?.title || '' }}
+    </div>
+
+    <!-- 页码 -->
+    <div v-if="pageInfoConfig.show" :class="bem.be('carousel', 'info')" :style="pageInfoStyle">
+      {{ currentPage + 1 }} / {{ data.length }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, watch, CSSProperties } from 'vue';
+  import CxCardContent from '../../card-content';
+  import { cardCarouselProps } from './cardCarousel';
+  import { createNamespace, prefix } from '@report-components/utils/create';
+  const props = defineProps(cardCarouselProps);
+  defineOptions({ name: `${prefix}-card-carousel` });
+  const bem = createNamespace('card');
+  const currentPage = ref(0);
+  const bgClass = computed(() => {
+    return [bem.b('carousel'), ...(props.bgClass || [])];
+  });
+  const currentItem = computed(() => {
+    return props.data[currentPage.value] || null;
+  });
+
+  function prevPage() {
+    if (props.data.length === 0) return;
+    currentPage.value = (currentPage.value - 1 + props.data.length) % props.data.length;
+  }
+
+  function nextPage() {
+    if (props.data.length === 0) return;
+    currentPage.value = (currentPage.value + 1) % props.data.length;
+  }
+
+  const bgStyle = computed(() => {
+    return {
+      backgroundColor: props.styleConfig.backgroundColor || '#fff',
+      width: props.styleConfig.width || '500px',
+      height: props.styleConfig.height || '300px',
+      borderRadius: props.styleConfig.borderRadius || '5px',
+      backgroundImage: props.imgSrc ? `url(${props.imgSrc})` : '',
+      backgroundSize: '100% 100%',
+      position: 'relative',
+      paddingTop: props.styleConfig.paddingTop,
+      paddingLeft: props.styleConfig.paddingLeft,
+      paddingBottom: props.styleConfig.paddingBottom,
+      paddingRight: props.styleConfig.paddingRight,
+    } as CSSProperties;
+  });
+
+  const arrowStyle = computed(() => ({
+    color: props.arrowConfig.color,
+    fontSize: props.arrowConfig.size,
+    background: props.arrowConfig.background,
+  }));
+
+  const titleStyle = computed(() => {
+    return {
+      color: props.titleConfig.color,
+      fontSize: props.titleConfig.fontSize,
+      top: props.titleConfig.top,
+      left: props.titleConfig.left,
+      width: props.titleConfig.width,
+      textAlign: props.titleConfig.textAlign,
+      position: 'absolute',
+    } as CSSProperties;
+  });
+
+  const pageInfoStyle = computed(() => {
+    return {
+      color: props.pageInfoConfig.color,
+      fontSize: props.pageInfoConfig.fontSize,
+      top: props.pageInfoConfig.top,
+      left: props.pageInfoConfig.left,
+      width: props.pageInfoConfig.width,
+      textAlign: props.pageInfoConfig.textAlign,
+      position: 'absolute',
+    } as CSSProperties;
+  });
+
+  watch(
+    () => props.data,
+    (val) => {
+      if (currentPage.value >= val.length) {
+        currentPage.value = 0;
+      }
+    },
+  );
+</script>

package/plugins/plugins/cesium-vue/src/components/card-carousel/src/cardCarousel.ts

@@ -0,0 +1,60 @@
+import type { ContentModel } from '../../card-content';
+import { CSSProperties, ExtractPropTypes, PropType } from 'vue';
+
+type cssConfig = CSSProperties & {
+  show?: boolean;
+};
+type arrowStyle = CSSProperties & {
+  show?: boolean;
+  size: string;
+};
+export const cardCarouselProps = {
+  data: {
+    type: Array as PropType<Array<ContentModel>>,
+    default: () => [],
+  },
+  bgClass: {
+    type: Array<String>,
+    default: () => [],
+  },
+  imgSrc: {
+    type: String,
+    default: () => '',
+  },
+  styleConfig: {
+    type: Object as PropType<CSSProperties>,
+    default: (): CSSProperties => ({
+      backgroundColor: '#fff',
+      width: '500px',
+      height: '300px',
+      borderRadius: '5px',
+    }),
+  },
+  arrowConfig: {
+    type: Object as PropType<arrowStyle>,
+    default: () => ({
+      show: true,
+      color: '#fff',
+      size: '20px',
+      background: 'rgba(0,0,0,0.3)',
+    }),
+  },
+  titleConfig: {
+    type: Object as PropType<cssConfig>,
+    default: () => ({
+      show: true,
+      color: '#fff',
+      size: '20px',
+      background: 'rgba(0,0,0,0.3)',
+    }),
+  },
+  pageInfoConfig: {
+    type: Object as PropType<cssConfig>,
+    default: () => ({
+      color: '#222',
+      backgroundColor: '#666',
+    }),
+  },
+} as const;
+
+export type cardCarouselProps = ExtractPropTypes<typeof cardCarouselProps>;

package/plugins/plugins/cesium-vue/src/components/card-content/index.ts

@@ -0,0 +1,12 @@
+import { withInstall } from '@report-components/utils/with-install';
+import _CardContent from './src/CardContent.vue';
+export * from './src/cardContent';
+
+const CxCardContent = withInstall(_CardContent);
+export default CxCardContent;
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    CxCardContent: typeof CxCardContent;
+  }
+}