leiting-bim 2.1.35 → 2.1.37

package/plugins/plugins/cesium-vue/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@report-components/cesium-vue",
+  "version": "0.0.1",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
+    "@originjs/vite-plugin-federation": "^1.4.1",
+    "@report-components/cesium-core": "workspace:*",
+    "@report-components/theme-chalk": "workspace:*",
+    "@report-components/utils": "workspace:*",
+    "@types/howler": "^2.2.12",
+    "@types/lodash-es": "^4.17.12",
+    "@vue/runtime-dom": "^3.5.22",
+    "@vueuse/core": "^13.9.0",
+    "ant-design-vue": "^4.2.6",
+    "axios": "^0.26.1",
+    "echarts-gl": "^2.0.9",
+    "echarts-liquidfill": "^3.1.0",
+    "howler": "^2.2.4",
+    "lodash-es": "^4.17.21",
+    "vite-plugin-cesium": "^1.2.23",
+    "vue-types": "^4.2.1",
+    "xgplayer": "^3.0.22"
+  },
+  "devDependencies": {
+    "@babel/generator": "^7.24.0",
+    "@babel/parser": "^7.24.0",
+    "@babel/traverse": "^7.24.0",
+    "@babel/types": "^7.24.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/tsconfig": "^0.8.1",
+    "less": "^4.3.0",
+    "less-loader": "^12.3.0",
+    "postcss-import": "^16.1.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.22",
+    "vue-tsc": "^2.2.10"
+  }
+}

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

@@ -0,0 +1,11 @@
+import { withInstall } from '@report-components/utils/with-install';
+import _BasicAudio from './src/BasicAudio.vue';
+
+const CxBasicAudio = withInstall(_BasicAudio);
+export default CxBasicAudio;
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    CxBasicAudio: typeof CxBasicAudio;
+  }
+}

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

@@ -0,0 +1,110 @@
+<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>
+
+    <!-- 时间进度 -->
+    <a-slider
+      v-model:value="currentTime"
+      :min="0"
+      :max="duration"
+      :step="0.1"
+      @change="seekAudio"
+    />
+
+    <!-- 音量控制 -->
+    <div :class="bem.b('sound')">
+      <div :class="bem.be('sound', 'text')">音量: {{ Math.round(volume * 100) }}%</div>
+      <a-slider v-model:value="volume" :min="0" :max="1" :step="0.01" @change="changeVolume" />
+    </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 { Slider as ASlider } from 'ant-design-vue'; // 局部引入 a-slider
+  import { basicAudioProps } from './basicAudio';
+  import { createNamespace, prefix } from '@report-components/utils/create';
+  // props 类型
+  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 | [number, number]) => {
+    if (sound.value) {
+      sound.value.seek(Array.isArray(value) ? value[0] : value);
+    }
+  };
+
+  // 改变音量
+  const changeVolume = (value: number | [number, number]) => {
+    const v = Array.isArray(value) ? value[0] : value;
+    volume.value = v;
+    if (sound.value) sound.value.volume(v);
+  };
+
+  // 格式化时间 mm:ss
+  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/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/plugins/cesium-vue/src/components/basic-video/index.ts

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

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

@@ -0,0 +1,99 @@
+<template>
+  <div :width="props.width" :height="props.height" :id="id" :class="videoClass">
+    <img v-if="showImage" :class="bem.be('video', 'poster')" :src="props.poster" />
+  </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 } from 'vue';
+  import Player from 'xgplayer';
+  import 'xgplayer/dist/index.min.css';
+  import { 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(() => {
+    if (props.control) {
+      return [bem.b('video'), bem.is('is', 'hide')];
+    } else {
+      return [bem.b('video')];
+    }
+  });
+
+  const showImage = ref(true);
+  let player: Player;
+
+  // 初始化西瓜视频
+  const initPlayer = () => {
+    player = new Player({
+      lang: 'zh',
+      volume: 0.3,
+      id: id.value,
+      url: props.url,
+      // poster: props.poster,
+      // playsinline: props.playsinline,
+      height: props.height,
+      width: props.width,
+      // closeVideoClick: true, //单击暂停/播放
+      // closeVideoDblclick: true, //双击全屏
+      // cssFullscreen: false, //显示样式全屏
+      // download: true, //显示下载按钮
+      // controls: false,
+      // marginControls: true,
+      controls: {
+        mode: 'bottom',
+      },
+      playbackRate: [],
+      cssFullscreen: false,
+      pip: true, // 启用画中画
+      loop: props.loop, // 启用循环播放
+      // icons: {
+      //   startPlay: `<div></div>`,
+      //   startPause: `<div></div>`
+      // },
+      ignores: ['start', 'progresspreview'],
+      commonStyle: {
+        // 进度条底色
+        progressColor: '',
+        // 播放完成部分进度条底色
+        playedColor: '#ff9700',
+        // 缓存部分进度条底色
+        cachedColor: '',
+        // 进度条滑块样式
+        sliderBtnStyle: {},
+        // 音量颜色
+        volumeColor: '#ff9700',
+      },
+      inactive: 1500, //播放器focus状态自动消失延迟时长，单位为ms
+      leavePlayerTime: 1500, //鼠标移出播放器区域就隐藏时间
+      autoplay: props.autoPlay,
+
+      whitelist: [''],
+    });
+
+    player.play();
+    emit('ready', {
+      id: id,
+      player: player,
+    });
+  };
+
+  onMounted(() => {
+    if (player == null) {
+      setTimeout(() => {
+        initPlayer();
+        showImage.value = false;
+      }, 500);
+    }
+  });
+  onUnmounted(() => {
+    emit('unload', id);
+  });
+</script>

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

@@ -0,0 +1,13 @@
+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 },
+  control: { type: Boolean, default: false },
+  width: { type: String, default: '100%' },
+  height: { type: String, default: '100%' },
+} as const;
+
+export type BasicVideoProps = ExtractPropTypes<typeof basicVideoProps>;

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

@@ -0,0 +1,4 @@
+import CameraRoam from './src/CameraRoam.vue';
+
+export const CxCameraRoam = CameraRoam;
+export default CxCameraRoam;