leiting-bim 2.1.35 → 2.1.37

package/plugins/cesium-vue/src/components/basic-audio/src/BasicAudio.vue

@@ -0,0 +1,119 @@
+<template>
+  <div :class="bem.b('wrap')">
+    <div :class="bem.b('tool')">
+      <div @click="togglePlay" :class="bem.b('play')">
+        {{ isPlaying ? '⏸ 暂停' : '▶ 播放' }}
+      </div>
+      <div>{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</div>
+    </div>
+
+    <input
+      type="range"
+      v-model="currentTime"
+      :min="0"
+      :max="duration"
+      step="0.1"
+      @change="onTimeChange"
+    />
+
+    <div :class="bem.b('sound')">
+      <div :class="bem.be('sound', 'text')">音量: {{ Math.round(volume * 100) }}%</div>
+      <input
+        type="range"
+        v-model="volume"
+        :min="0"
+        :max="1"
+        step="0.01"
+        @change="onVolumeChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onBeforeUnmount } from 'vue';
+  import { Howl } from 'howler';
+  import type { Howl as HowlType } from 'howler';
+  import { basicAudioProps } from './basicAudio';
+  import { createNamespace, prefix } from '@report-components/utils/create';
+  const props = defineProps(basicAudioProps);
+  defineOptions({ name: `${prefix}-basic-audio` });
+  const bem = createNamespace('audio');
+
+  const sound = ref<HowlType | null>(null);
+  const isPlaying = ref<boolean>(false);
+  const currentTime = ref<number>(0);
+  const duration = ref<number>(0);
+  const volume = ref<number>(0.5);
+  let timer: number | undefined;
+
+  const loadAudio = () => {
+    sound.value = new Howl({
+      src: [props.src],
+      volume: volume.value,
+      html5: true,
+      onload() {
+        duration.value = sound.value?.duration() ?? 0;
+      },
+      onend() {
+        isPlaying.value = false;
+        if (timer) clearInterval(timer);
+      },
+    });
+  };
+
+  const togglePlay = () => {
+    if (!sound.value) loadAudio();
+
+    if (isPlaying.value && sound.value) {
+      sound.value.pause();
+      isPlaying.value = false;
+      if (timer) clearInterval(timer);
+    } else if (sound.value) {
+      sound.value.play();
+      isPlaying.value = true;
+      timer = window.setInterval(() => {
+        currentTime.value = sound.value?.seek() as number;
+      }, 500);
+    }
+  };
+
+  const seekAudio = (value: number) => {
+    if (sound.value) {
+      sound.value.seek(value);
+    }
+  };
+
+  const changeVolume = (value: number) => {
+    volume.value = value;
+    if (sound.value) sound.value.volume(value);
+  };
+
+  const onTimeChange = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    const value = Number(target.value);
+    currentTime.value = value;
+    seekAudio(value);
+  };
+
+  const onVolumeChange = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    const value = Number(target.value);
+    changeVolume(value);
+  };
+
+  const formatTime = (sec: number) => {
+    const minutes = Math.floor(sec / 60) || 0;
+    const seconds = Math.floor(sec % 60) || 0;
+    return `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+  };
+
+  onMounted(() => {
+    loadAudio();
+  });
+
+  onBeforeUnmount(() => {
+    if (sound.value) sound.value.unload();
+    if (timer) clearInterval(timer);
+  });
+</script>

package/plugins/cesium-vue/src/components/basic-audio/src/basicAudio.ts

@@ -0,0 +1,6 @@
+import { ExtractPropTypes } from 'vue';
+export const basicAudioProps = {
+  src: { type: String, required: true },
+} as const;
+
+export type BasicAudioProps = ExtractPropTypes<typeof basicAudioProps>;

package/plugins/cesium-vue/src/components/basic-video/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from '@report-components/utils/with-install';
+import _BasicVideo from './src/BasicVideo.vue';
+export * from './src/basicVideo';
+
+const CxBasicVideo = withInstall(_BasicVideo);
+export { CxBasicVideo };
+export default CxBasicVideo;

package/plugins/cesium-vue/src/components/basic-video/src/BasicVideo.vue

@@ -0,0 +1,58 @@
+<template>
+  <div :class="videoClass" :style="{ width: props.width, height: props.height }">
+    <video
+      ref="videoRef"
+      :id="id"
+      :src="props.url"
+      :poster="props.poster"
+      :autoplay="props.autoPlay"
+      :loop="props.loop"
+      :controls="props.control"
+      :muted="props.muted"
+      style="width: 100%; height: 100%"
+    ></video>
+  </div>
+</template>
+<script setup lang="ts">
+  import { createNamespace, prefix } from '@report-components/utils/create';
+  import { buildUUID } from '@report-components/utils/uuid';
+  import { onMounted, onUnmounted, ref, computed } from 'vue';
+  import { basicVideoProps } from './basicVideo';
+  defineOptions({ name: `${prefix}-basic-video` });
+  const props = defineProps(basicVideoProps);
+  const bem = createNamespace('video');
+  const emit = defineEmits(['ready', 'unload']);
+  const id = computed(() => {
+    return props.id || buildUUID();
+  });
+
+  const videoClass = computed(() => {
+    return [bem.b('video')];
+  });
+
+  const videoRef = ref<HTMLVideoElement | null>(null);
+
+  const initVideo = () => {
+    if (!videoRef.value) return;
+    emit('ready', {
+      id: id,
+      player: videoRef.value,
+    });
+  };
+
+  onMounted(() => {
+    if (videoRef.value) {
+      videoRef.value.muted = props.muted;
+      if (props.autoPlay) {
+        const playResult = videoRef.value.play();
+        if (playResult && typeof (playResult as any).catch === 'function') {
+          (playResult as Promise<void>).catch(() => {});
+        }
+      }
+    }
+    initVideo();
+  });
+  onUnmounted(() => {
+    emit('unload', id);
+  });
+</script>

package/plugins/cesium-vue/src/components/basic-video/src/basicVideo.ts

@@ -0,0 +1,14 @@
+import { ExtractPropTypes } from 'vue';
+export const basicVideoProps = {
+  id: { type: String, default: '', required: true },
+  url: { type: String, default: '' },
+  poster: { type: String, default: '' },
+  autoPlay: { type: Boolean, default: false },
+  loop: { type: Boolean, default: false },
+  muted: { type: Boolean, default: true },
+  control: { type: Boolean, default: true },
+  width: { type: String, default: '100%' },
+  height: { type: String, default: '100%' },
+} as const;
+
+export type BasicVideoProps = ExtractPropTypes<typeof basicVideoProps>;

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

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

package/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/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/cesium-vue/src/components/card-content/index.ts

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

package/plugins/cesium-vue/src/components/card-content/src/CardContent.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :class="bem.b('content')">
+    <div
+      :class="bem.be('content', 'text')"
+      v-if="props.data && props.data.type == 'text'"
+      v-html="props.data.content"
+      :style="{ 'font-size': props.data.size || '14px' }"
+    >
+    </div>
+    <div :class="bem.be('content', 'video')" v-else-if="props.data && props.data.type == 'video'">
+      <div :class="bem.be('content', 'video__inner')">
+        <CxBasicVideo :url="props.data.src" />
+      </div>
+    </div>
+    <div :class="bem.be('content', 'img')" v-else-if="props.data && props.data.type == 'img'">
+      <img :src="props.data.src" />
+    </div>
+    <div :class="bem.be('content', 'iframe')" v-else-if="props.data && props.data.type == 'iframe'">
+      <iframe :src="props.data.src" class="w-full h-full" frameborder="0"></iframe>
+    </div>
+    <div
+      :class="bem.be('content', 'carousel')"
+      v-else-if="props.data && props.data.type == 'carousel'"
+    >
+      <CarouselImg :class="bem.be('content', 'carousel__img')" :data="props.data.file" />
+    </div>
+    <div :class="bem.be('content', 'chart')" v-else-if="props.data && props.data.type == 'chart'">
+      <CxEchartsPro v-bind="props.data?.echartsData" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import CxBasicVideo from '../../basic-video/index';
+  import CarouselImg from '../../carousel-img';
+  import CxEchartsPro from '../../echarts-pro';
+  import { cardContentProps } from './cardContent';
+  import { createNamespace, prefix } from '@report-components/utils/create';
+  const props = defineProps(cardContentProps);
+  defineOptions({ name: `${prefix}-card-content` });
+  const bem = createNamespace('card');
+</script>

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

@@ -0,0 +1,22 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export interface ContentModel {
+  title: string;
+  type: string;
+  content: string;
+  src: string;
+  size?: string;
+  slotNo: string;
+  componentProps: any;
+  file: Array<string>;
+  echartsData: any;
+}
+
+export const cardContentProps = {
+  data: {
+    type: Object as PropType<ContentModel>,
+    default: () => ({} as ContentModel), // ✅ 工厂函数
+  },
+} as const;
+
+export type CardContentProps = ExtractPropTypes<typeof cardContentProps>;

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

@@ -0,0 +1,7 @@
+import { withInstall } from '@report-components/utils/with-install';
+import _CardPage from './src/CardPage.vue';
+export * from './src/cardPage';
+
+const CxCardPage = withInstall(_CardPage);
+export { CxCardPage };
+export default CxCardPage;

package/plugins/cesium-vue/src/components/card-page/src/CardPage.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :class="bem.b('page')" :style="bgStyle">
+    <!-- 内容 -->
+    <div :class="bem.b('page-content')">
+      <CxCardContent
+        :class="bem.be('page-content', 'item')"
+        v-if="currentItem"
+        :data="currentItem"
+      />
+    </div>
+    <!-- 分页控制 -->
+    <div
+      :class="bem.b('page-pagination')"
+      :style="{
+        color: paginationStyle?.textColor || '#222',
+      }"
+    >
+      <button
+        @click="prevPage"
+        :style="{ color: paginationStyle?.buttonColor || '#666' }"
+        @mouseenter="hoverBtn = 'prev'"
+        @mouseleave="hoverBtn = ''"
+        :class="[bem.be('page', 'btn'), { hover: hoverBtn === 'prev' }]"
+      >
+        ◀
+      </button>
+
+      <div :class="bem.b('page-pagination-center')">
+        <div :class="bem.be('page', 'title-preview')">
+          {{ currentItem?.title || '' }}
+        </div>
+        <div
+          :class="bem.be('page', 'info')"
+          :style="{ color: paginationStyle?.pageInfoColor || '#888' }"
+        >
+          {{ currentPage + 1 }} / {{ data.length }}
+        </div>
+      </div>
+
+      <button
+        @click="nextPage"
+        :style="{ color: paginationStyle?.buttonColor || '#666' }"
+        @mouseenter="hoverBtn = 'next'"
+        @mouseleave="hoverBtn = ''"
+        :class="[bem.be('page', 'btn'), { hover: hoverBtn === 'next' }]"
+      >
+        ▶
+      </button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, watch } from 'vue';
+  import CxCardContent from '../../card-content';
+  import { createNamespace, prefix } from '@report-components/utils/create';
+  import { cardPageProps } from './cardPage';
+  const props = defineProps(cardPageProps);
+  defineOptions({ name: `${prefix}-card-page` });
+  const bem = createNamespace('card');
+
+  const currentPage = ref(0);
+  const hoverBtn = ref('');
+
+  const currentItem = computed(() => {
+    return props.data[currentPage.value] || {};
+  });
+
+  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%',
+      paddingTop: props.styleConfig.paddingTop,
+      paddingLeft: props.styleConfig.paddingLeft,
+      paddingBottom: props.styleConfig.paddingBottom,
+      paddingRight: props.styleConfig.paddingRight,
+      '--buttonHoverColor': props.paginationStyle?.buttonHoverColor || '#000',
+    };
+  });
+
+  watch(
+    () => props.data,
+    (val) => {
+      if (currentPage.value >= val.length) {
+        currentPage.value = 0;
+      }
+    },
+  );
+</script>

package/plugins/cesium-vue/src/components/card-page/src/cardPage.ts

@@ -0,0 +1,37 @@
+import type { ContentModel } from '../../card-content';
+import { CSSProperties, ExtractPropTypes, PropType } from 'vue';
+
+type PaginationStyle = CSSProperties & {
+  buttonHoverColor?: string;
+  textColor?: string;
+  buttonColor?: string;
+  pageInfoColor?: string;
+};
+export const cardPageProps = {
+  data: {
+    type: Array as PropType<Array<ContentModel>>,
+    default: () => [],
+  },
+  imgSrc: {
+    type: String,
+    default: () => '',
+  },
+  styleConfig: {
+    type: Object as PropType<CSSProperties>,
+    default: (): CSSProperties => ({
+      backgroundColor: '#fff',
+      width: '500px',
+      height: '300px',
+      borderRadius: '5px',
+    }),
+  },
+  paginationStyle: {
+    type: Object as PropType<PaginationStyle>,
+    default: () => ({
+      color: '#222',
+      backgroundColor: '#666',
+    }),
+  },
+} as const;
+
+export type CardPageProps = ExtractPropTypes<typeof cardPageProps>;

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

@@ -0,0 +1,7 @@
+import { withInstall } from '@report-components/utils/with-install';
+import _CarouselImg from './src/CarouselImg.vue';
+export * from './src/carouselImg';
+
+const CxCarouselImg = withInstall(_CarouselImg);
+export { CxCarouselImg };
+export default CxCarouselImg;