leiting-bim 2.1.35 → 2.1.37

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

@@ -0,0 +1,84 @@
+<template>
+  <div v-if="props.data?.length >= 1" :class="bem.b()">
+    <div
+      v-for="(url, i) in props.data"
+      :key="i"
+      :class="bem.b('inner')"
+      v-show="i === currentIndex"
+    >
+      <img :src="url" :class="bem.be('inner', 'img')" />
+    </div>
+    <button
+      v-if="props.data?.length > 1"
+      type="button"
+      :class="[bem.e('btn'), bem.e('arrow__left')]"
+      @click="prev"
+    >
+      ◀
+    </button>
+    <button
+      v-if="props.data?.length > 1"
+      type="button"
+      :class="[bem.e('btn'), bem.e('arrow__right')]"
+      @click="next"
+    >
+      ▶
+    </button>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted, onBeforeUnmount, watch } from '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');
+
+  const currentIndex = ref(0);
+  let timer: number | undefined;
+
+  const showIndex = (index: number) => {
+    if (!props.data || props.data.length === 0) return;
+    const length = props.data.length;
+    const normalized = ((index % length) + length) % length;
+    currentIndex.value = normalized;
+  };
+
+  const next = () => {
+    showIndex(currentIndex.value + 1);
+  };
+
+  const prev = () => {
+    showIndex(currentIndex.value - 1);
+  };
+
+  const stopAutoPlay = () => {
+    if (timer) {
+      clearInterval(timer);
+      timer = undefined;
+    }
+  };
+
+  const startAutoPlay = () => {
+    stopAutoPlay();
+    if (!props.autoplay || !props.data || props.data.length <= 1) return;
+    timer = window.setInterval(() => {
+      next();
+    }, props.interval);
+  };
+
+  onMounted(() => {
+    startAutoPlay();
+  });
+
+  watch(
+    () => [props.autoplay, props.interval, props.data?.length],
+    () => {
+      startAutoPlay();
+    },
+  );
+
+  onBeforeUnmount(() => {
+    stopAutoPlay();
+  });
+</script>

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

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

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

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

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

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

package/plugins/cesium-vue/src/components/marker-bubble/src/MarkerBubble.vue

@@ -0,0 +1,235 @@
+<template>
+  <div :class="bem.b('bubble')">
+    <div ref="el" :style="nameTransform">
+      <div :class="bem.be('bubble', 'name')" v-if="props.text" :style="props.textStyle">
+        {{ props.text }}
+      </div>
+    </div>
+    <div :class="bem.be('bubble', 'line')" :style="lineStyle"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { createNamespace, prefix } from '@report-components/utils/create';
+  import { markerBubbleProps } from './markerBubble';
+  import { computed, ref } from 'vue';
+  import { useElementSize, useDraggable, useMouseInElement } from '@vueuse/core';
+  defineOptions({ name: `${prefix}-marker` });
+  const props = defineProps(markerBubbleProps);
+  const bem = createNamespace('marker');
+
+  const emit = defineEmits(['setOtherOffset']);
+  const el = ref();
+  const { width, height } = useElementSize(el);
+  const draggable = ref(false);
+  const lineStyle = computed(() => {
+    let otherOffsetX = props.otherOffset?.x || 0;
+    let otherOffsetY = props.otherOffset?.y || 0;
+    if (isMove.value && (props.isCanDraggable || draggable.value)) {
+      otherOffsetX = currX.value || 0;
+      otherOffsetY = currY.value || 0;
+    }
+
+    let XF = (props.pixelOffset?.x || 0) + otherOffsetX;
+    let YF = (props.pixelOffset?.y || 0) + otherOffsetY;
+    let X = 0;
+    let Y = 0;
+    let XL = X + XF;
+    let XM = X + XF + width.value / 2;
+    let XR = X + XF + width.value;
+    let YT = Y + YF;
+    let YM = Y + YF + height.value / 2;
+    let YB = Y + YF + height.value;
+    let DX1 = 0;
+    let DY1 = 0;
+    let DX2 = 0;
+    let DY2 = 0;
+    let arrowW = 0;
+    let arrowH = 0;
+    let arrowXF = 0;
+    let arrowYF = 0;
+    let interval = 24;
+    let PML = 4;
+    let borderRadius = 4;
+    let EDGE = '';
+    let directionX = '';
+    let directionY = '';
+    //计算动态点位
+    if (X < XL && Y >= YT && Y <= YB) {
+      //点在矩形左边
+      DX1 = XL;
+      DX2 = XL;
+      let PY = Y < YM ? YT : YM;
+      DY1 = PY + PML;
+      DY2 = PY + PML + Math.min(interval, height.value / 2 - PML - borderRadius);
+      // DY1 = PY + PML;
+      // DY2 = PY + PML + interval;
+      EDGE = 'left';
+    } else if (X > XR && Y >= YT && Y <= YB) {
+      //点在矩形右边
+      DX1 = XR;
+      DX2 = XR;
+      let PY = Y < YM ? YT : YM;
+      DY1 = PY + PML;
+      DY2 = PY + PML + Math.min(interval, height.value / 2 - PML - borderRadius);
+      // DY1 = PY + PML;
+      // DY2 = PY + PML + interval;
+      EDGE = 'right';
+    } else if (Y < YT) {
+      //点在矩形上方
+      DY1 = YT;
+      DY2 = YT;
+      let PX = X < XM ? XL : XM;
+      DX1 = PX + PML;
+      DX2 = PX + PML + Math.min(interval, width.value / 2 - PML - borderRadius);
+      // DX1 = PX + PML;
+      // DX2 = PX + PML + interval;
+      EDGE = 'top';
+    } else if (Y > YB) {
+      //点在矩形下方
+      DY1 = YB;
+      DY2 = YB;
+      let PX = X < XM ? XL : XM;
+      DX1 = PX + PML;
+      DX2 = PX + PML + Math.min(interval, width.value / 2 - PML - borderRadius);
+      // DX1 = PX + PML;
+      // DX2 = PX + PML + interval;
+      EDGE = 'bottom';
+    } else {
+      DX1 = 0;
+      DX2 = 0;
+      DY1 = 0;
+      DY2 = 0;
+    }
+    //计算箭头容器大小与偏移量
+    if (X >= DX1 && X <= DX2) {
+      arrowW = Math.abs(X - DX1) + Math.abs(X - DX2);
+      arrowXF = -Math.abs(X - DX1);
+      directionX = 'mid';
+    } else {
+      arrowW = Math.max(Math.abs(X - DX1), Math.abs(X - DX2));
+      arrowXF = X < DX1 ? 0 : -arrowW;
+      directionX = X < DX1 ? 'left' : 'right';
+    }
+
+    if (Y >= DY1 && Y <= DY2) {
+      arrowH = Math.abs(Y - DY1) + Math.abs(Y - DY2);
+      arrowYF = -Math.abs(Y - DY1);
+      directionY = 'mid';
+    } else {
+      arrowH = Math.max(Math.abs(Y - DY1), Math.abs(Y - DY2));
+      arrowYF = Y < DY1 ? 0 : -arrowH;
+      directionY = Y < DY1 ? 'top' : 'bottom';
+    }
+    //计算剖切路径
+    let p1x = 0 as Number | String;
+    let p1y = 0 as Number | String;
+    let p2x = 0 as Number | String;
+    let p2y = 0 as Number | String;
+    let p3x = 0 as Number | String;
+    let p3y = 0 as Number | String;
+
+    if (EDGE == 'top' || EDGE == 'bottom') {
+      p1y = EDGE == 'top' ? 0 : '100%';
+      p2y = EDGE == 'top' ? '100%' : 0;
+      p3y = EDGE == 'top' ? '100%' : 0;
+      if (directionX == 'left') {
+        p1x = 0;
+        p2x = DX1 + 'px';
+        p3x = '100%';
+      } else if (directionX == 'right') {
+        p1x = '100%';
+        p2x = 0;
+        p3x = Math.abs(DX2 - DX1) + 'px';
+      } else if (directionX == 'mid') {
+        p1x = Math.abs(X - DX1) + 'px';
+        p2x = 0;
+        p3x = '100%';
+      }
+    }
+
+    if (EDGE == 'left' || EDGE == 'right') {
+      p1x = EDGE == 'left' ? 0 : '100%';
+      p2x = EDGE == 'left' ? '100%' : 0;
+      p3x = EDGE == 'left' ? '100%' : 0;
+      if (directionY == 'top') {
+        p1y = 0;
+        p2y = DY1 + 'px';
+        p3y = '100%';
+      } else if (directionY == 'bottom') {
+        p1y = '100%';
+        p2y = 0;
+        p3y = Math.abs(DY2 - DY1) + 'px';
+      } else if (directionY == 'mid') {
+        p1y = Math.abs(Y - DY1) + 'px';
+        p2y = 0;
+        p3y = '100%';
+      }
+    }
+    let clipPath = `polygon(${p1x} ${p1y}, ${p2x} ${p2y},${p3x} ${p3y})`;
+    return {
+      ...props.lineStyle,
+      width: arrowW + 'px',
+      height: arrowH + 'px',
+      clipPath: clipPath,
+      transform: `translate(${-XF + arrowXF + otherOffsetX}px  , ${
+        -YF + arrowYF + otherOffsetY
+      }px)`,
+    };
+  });
+  let isMouseOver = false;
+  const oldX = ref(0);
+  const oldY = ref(0);
+  const currX = ref(0);
+  const currY = ref(0);
+  const isMove = ref(false);
+  const nameTransform = computed(() => {
+    if (isMove.value && (props.isCanDraggable || draggable.value)) {
+      return {
+        width: `max-content`,
+        transform: `translate(${currX.value}px, ${currY.value}px)`,
+      };
+    } else {
+      return {
+        width: `max-content`,
+        transform: `translate(${props.otherOffset?.x || 0}px, ${props.otherOffset?.y || 0}px)`,
+      };
+    }
+  });
+  const { elementPositionX, elementPositionY } = useMouseInElement(el);
+  useDraggable(el, {
+    initialValue: { x: elementPositionX.value, y: elementPositionY.value },
+    onStart: () => {
+      oldX.value = elementPositionX.value;
+      oldY.value = elementPositionY.value;
+      setTimeout(() => {
+        if (props.onCanDraggable) {
+          draggable.value = props.onCanDraggable();
+        }
+        isMove.value = true;
+      });
+    },
+    onMove: (position) => {
+      if ((props.isCanDraggable || draggable.value) && isMove.value) {
+        currX.value = position.x - oldX.value + (props.otherOffset?.x || 0);
+        currY.value = position.y - oldY.value + (props.otherOffset?.y || 0);
+        console.log({
+          x: currX.value,
+          y: currY.value,
+        });
+      }
+    },
+    onEnd: (position) => {
+      if (position.x == 0 && position.y == 0) return;
+      if (position.x == oldX.value && position.y == oldY.value) return;
+      if (props.isCanDraggable || draggable.value) {
+        currX.value = position.x - oldX.value + (props.otherOffset?.x || 0);
+        currY.value = position.y - oldY.value + (props.otherOffset?.y || 0);
+        emit('setOtherOffset', {
+          x: position.x - oldX.value + (props.otherOffset?.x || 0),
+          y: position.y - oldY.value + (props.otherOffset?.y || 0),
+        });
+      }
+      isMove.value = false;
+    },
+  });
+</script>

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

@@ -0,0 +1,35 @@
+import { ExtractPropTypes } from 'vue';
+export const markerBubbleProps = {
+  text: { type: String, default: '文字' },
+  textStyle: {
+    type: Object,
+    default: () => {},
+  },
+  lineStyle: {
+    type: Object,
+    default: () => {},
+  },
+  isCanDraggable: {
+    type: Boolean,
+    default: false,
+  },
+  onCanDraggable: {
+    type: Function,
+  },
+  pixelOffset: {
+    type: Object,
+    default: () => {
+      x: 0;
+      y: 0;
+    },
+  },
+  otherOffset: {
+    type: Object,
+    default: () => {
+      x: 0;
+      y: 0;
+    },
+  },
+} as const;
+
+export type MarkerBubbleProps = ExtractPropTypes<typeof markerBubbleProps>;

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

@@ -0,0 +1,7 @@
+import { withInstall } from '@report-components/utils/with-install';
+import _MarkerDefault from './src/MarkerDefault.vue';
+export * from './src/markerDefault';
+
+const CxMarkerDefault = withInstall(_MarkerDefault);
+export { CxMarkerDefault };
+export default CxMarkerDefault;

package/plugins/cesium-vue/src/components/marker-default/src/MarkerDefault.vue

@@ -0,0 +1,19 @@
+<template>
+  <div :class="bem.b('default')">
+    <span :class="textClass" v-if="props.text" :style="props.textStyle">{{ props.text }}</span>
+    <div>
+      <img :src="img" :class="[bem.be('default', 'img'),'tag-img']" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { createNamespace, prefix } from '@report-components/utils/create';
+  import { markerDefaultProps } from './markerDefault';
+  import { computed } from 'vue';
+  defineOptions({ name: `${prefix}-marker-default` });
+  const textClass = computed(() => {
+    return props.textStyle ? [bem.be('default', 'custom'),'tag-text'] : [bem.be('default', 'name'),'tag-text'];
+  });
+  const props = defineProps(markerDefaultProps);
+  const bem = createNamespace('marker');
+</script>

package/plugins/cesium-vue/src/components/marker-default/src/markerDefault.ts

@@ -0,0 +1,12 @@
+import { ExtractPropTypes } from 'vue';
+export const markerDefaultProps = {
+  text: { type: String, default: '' },
+  img: { type: String, default: '' },
+  suffix: { type: String, default: '.png' },
+  textStyle: {
+    type: Object,
+    default: () => {},
+  },
+} as const;
+
+export type MarkerDefaultProps = ExtractPropTypes<typeof markerDefaultProps>;

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

@@ -0,0 +1,7 @@
+import { withInstall } from '@report-components/utils/with-install';
+import _MarkerHtml from './src/MarkerHtml.vue';
+export * from './src/markerHtml';
+
+const CxMarkerHtml = withInstall(_MarkerHtml);
+export { CxMarkerHtml };
+export default CxMarkerHtml;

package/plugins/cesium-vue/src/components/marker-html/src/MarkerHtml.vue

@@ -0,0 +1,21 @@
+<template>
+  <div :class="bem.b('html')">
+    <div
+      :class="bem.be('html', 'custom')"
+      v-if="props.text"
+      :style="props.textStyle"
+      v-html="props.text"
+    ></div>
+    <div>
+      <img :src="img" :class="bem.be('html', 'img')" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { createNamespace, prefix } from '@report-components/utils/create';
+  import { markerHTMLProps } from './markerHtml';
+  defineOptions({ name: `${prefix}-marker-html` });
+
+  const props = defineProps(markerHTMLProps);
+  const bem = createNamespace('marker');
+</script>

package/plugins/cesium-vue/src/components/marker-html/src/markerHtml.ts

@@ -0,0 +1,12 @@
+import { ExtractPropTypes } from 'vue';
+export const markerHTMLProps = {
+  text: { type: String, default: '' },
+  img: { type: String, default: '' },
+  suffix: { type: String, default: '.png' },
+  textStyle: {
+    type: Object,
+    default: () => {},
+  },
+} as const;
+
+export type MarkerHTMLProps = ExtractPropTypes<typeof markerHTMLProps>;

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

@@ -0,0 +1,9 @@
+import { withInstall } from '@report-components/utils/with-install';
+import _MarkerManage from './src/components/MarkerManage.vue';
+export * from './src/type/markerManage';
+export * from './src/core/MarkerManagerCore';
+export * from './src/core/MarkerManage';
+
+const CxMarkerManage = withInstall(_MarkerManage);
+export { CxMarkerManage };
+export default CxMarkerManage;