leiting-bim 2.1.35 → 2.1.37

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

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

package/plugins/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/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/plugins/cesium-vue/src/components/carousel-img/index.ts

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

package/plugins/plugins/cesium-vue/src/components/carousel-img/src/CarouselImg.vue

@@ -0,0 +1,15 @@
+<template>
+  <Carousel v-if="props.data?.length >= 1" :class="bem.b()">
+    <div v-for="(url, i) in props.data" :key="i" :class="bem.b('inner')">
+      <img :src="url" :class="bem.be('inner', 'img')" />
+    </div>
+  </Carousel>
+</template>
+<script lang="ts" setup>
+  import { Carousel } from 'ant-design-vue';
+  import { carouselImgProps } from './carouselImg';
+  const props = defineProps(carouselImgProps);
+  import { createNamespace, prefix } from '@report-components/utils/create';
+  defineOptions({ name: `${prefix}-carousel-img` });
+  const bem = createNamespace('carousel');
+</script>

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

@@ -0,0 +1,6 @@
+import { ExtractPropTypes, PropType } from 'vue';
+export const carouselImgProps = {
+  data: { type: Array as PropType<string[]>, default: () => [] },
+} as const;
+
+export type CarouselImgProps = ExtractPropTypes<typeof carouselImgProps>;

package/plugins/plugins/cesium-vue/src/components/echarts-pro/index.ts

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

package/plugins/plugins/cesium-vue/src/components/echarts-pro/src/EchartsPro.vue

@@ -0,0 +1,107 @@
+<template>
+  <div :style="{ height, width }" style="display: inline-block">
+    <div ref="chartRef" class="w-full h-full"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted, watch, unref, onBeforeUnmount, useTemplateRef } from 'vue';
+  import { useECharts } from './hook/useECharts';
+  import { useIntervalFn } from '@vueuse/core';
+  import { cloneDeep } from 'lodash-es';
+  import axios from 'axios';
+  import { echartsProProps } from './echartsPro';
+  import { prefix } from '@report-components/utils/create';
+  const props = defineProps(echartsProProps);
+  defineOptions({ name: `${prefix}-echarts-pro` });
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const el = useTemplateRef('chartRef');
+  const { setOptions } = useECharts(chartRef, props.theme);
+
+  const cache = {
+    data: {} as any,
+    isLoading: false,
+  };
+
+  /** 拉取动态数据 */
+  const fetchData = async () => {
+    if (cache.isLoading) return cache.data;
+    cache.isLoading = true;
+    try {
+      const headers = (props.dataSourceSetting?.headers || []).reduce(
+        (acc: Record<string, any>, cur: any) => {
+          if (cur.key) acc[cur.key] = cur.value;
+          return acc;
+        },
+        {},
+      );
+      const res = await axios({
+        url: props.dataSourceSetting?.apiUrl,
+        method: props.dataSourceSetting?.method || 'GET',
+        data: props.dataSourceSetting?.data,
+        headers,
+      });
+      let data;
+      // 支持 afterFetch 处理函数
+      if (props.dataSourceSetting?.afterFetch) {
+        try {
+          const fn = new Function(`return ${props.dataSourceSetting.afterFetch}`)();
+          data = fn(res);
+        } catch (e) {
+          console.error('afterFetch 处理失败', e);
+          data = [];
+        }
+      }
+
+      cache.data = data;
+    } catch (e) {
+      console.error(e);
+      cache.data = [];
+    } finally {
+      cache.isLoading = false;
+    }
+
+    return cache.data;
+  };
+
+  /** 初始化图表 */
+  const initChart = async () => {
+    if (!props.dataSourceSetting?.Polling) pause();
+    else resume();
+    try {
+      let option = cloneDeep(unref(props.option) || {});
+
+      // 如果需要动态数据，先 fetch
+      if (props.dataSourceSetting?.useDynamicData) {
+        option.dataset = await fetchData();
+      } else if (props.dataset) {
+        option.dataset = unref(props.dataset);
+      }
+
+      setOptions(option);
+    } catch (e) {
+      console.warn('初始化图表失败', e);
+    }
+  };
+
+  // 轮询控制
+  const { pause, resume } = useIntervalFn(
+    initChart,
+    props.dataSourceSetting?.PollingInterval || 10000,
+    { immediate: true },
+  );
+
+  onMounted(() => {
+    initChart();
+    // 是否开启轮询
+  });
+
+  onBeforeUnmount(() => {
+    if (!props.dataSourceSetting?.Polling) pause();
+  });
+  // props 改变自动刷新
+  watch(
+    () => ({ ...props }),
+    () => initChart(),
+    { deep: true },
+  );
+</script>

package/plugins/plugins/cesium-vue/src/components/echarts-pro/src/echartsPro.ts

@@ -0,0 +1,12 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { string } from 'vue-types';
+export const echartsProProps = {
+  width: { type: String, default: '100%' },
+  height: { type: String, default: '100%' },
+  option: { type: Object, default: () => ({}) },
+  dataset: { type: Object, default: () => ({}) },
+  dataSourceSetting: { type: Object, default: () => ({}) },
+  theme: { type: String, default: 'light' },
+} as const;
+
+export type EchartsProProps = ExtractPropTypes<typeof echartsProProps>;

package/plugins/plugins/cesium-vue/src/components/echarts-pro/src/hook/useECharts.ts

@@ -0,0 +1,55 @@
+// /@/hooks/web/useECharts.ts
+import * as echarts from 'echarts'; // 直接引入完整包
+import { ref, Ref, onMounted, onBeforeUnmount, nextTick, markRaw } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+import type { EChartsCoreOption } from 'echarts/core';
+interface UseEChartsReturn {
+  echarts: typeof echarts;
+  chartInstance: Ref;
+  setOptions: (option: EChartsCoreOption, clear?: boolean) => void;
+  resize: () => void;
+}
+
+export function useECharts(
+  elRef: Ref<HTMLElement | null>,
+  theme?: string | object,
+): UseEChartsReturn {
+  const chartInstance = ref<echarts.ECharts | null>(null);
+
+  const initChart = () => {
+    if (elRef.value) { 
+      chartInstance.value = markRaw(echarts.init(elRef.value, theme));
+    }
+  };
+
+  const setOptions = (option: EChartsCoreOption, clear = true) => {
+    if (!chartInstance.value) initChart();
+    if (!chartInstance.value) return;
+    if (clear) chartInstance.value.clear();
+    chartInstance.value.setOption(option, true);
+  };
+
+  const resize = () => {
+    chartInstance.value?.resize();
+  };
+
+  onMounted(() => {
+    initChart();
+    useResizeObserver(elRef, () => {
+      resize();
+    });
+    nextTick(() => resize()); // ✅初始强制一次
+  });
+
+  onBeforeUnmount(() => {
+    chartInstance.value?.dispose();
+    chartInstance.value = null;
+  });
+
+  return {
+    echarts,
+    chartInstance,
+    setOptions,
+    resize,
+  };
+}

package/plugins/plugins/cesium-vue/src/components/marker-bubble/index.ts

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