@ued_fpi/data-visual/dist/es/wgms/src/runtime/ScreenRenderer.vue.mjs

<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />

import { defineComponent, computed, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, toDisplayString } from 'vue';
import { getWgmsComponentById } from '../registry/index.mjs';
import { adaptStandardProps } from './adapter.mjs';

const _hoisted_1 = {
  key: 1,
  class: "dv-wgms-screen-renderer-missing"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "ScreenRenderer",
  props: {
    schema: { default: () => ({ widgets: [] }) }
  },
  setup(__props, { expose: __expose }) {
    const props = __props;
    const componentRefs = /* @__PURE__ */ new Map();
    const timerMap = /* @__PURE__ */ new Map();
    const setWidgetRef = (id, instance) => {
      if (!instance) {
        componentRefs.delete(id);
        return;
      }
      componentRefs.set(id, instance);
    };
    const clearTimers = () => {
      timerMap.forEach((timer) => clearInterval(timer));
      timerMap.clear();
    };
    const invokeReload = (widget) => {
      const refInstance = componentRefs.get(widget.id);
      const entry = getWgmsComponentById(widget.componentId);
      const methodName = entry?.meta.adapter?.reloadMethod || "reload";
      const method = refInstance?.[methodName];
      if (typeof method === "function")
        method();
    };
    const toCssValue = (value) => {
      if (value === void 0)
        return void 0;
      return typeof value === "number" ? `${value}px` : value;
    };
    const normalizedWidgets = computed(() => {
      return (props.schema.widgets || []).map((widget) => {
        const entry = getWgmsComponentById(widget.componentId);
        const layoutStyle = {
          ...widget.layout?.style || {}
        };
        if (widget.layout) {
          if (widget.layout.x !== void 0)
            layoutStyle.left = toCssValue(widget.layout.x) || "";
          if (widget.layout.y !== void 0)
            layoutStyle.top = toCssValue(widget.layout.y) || "";
          if (widget.layout.w !== void 0)
            layoutStyle.width = toCssValue(widget.layout.w) || "";
          if (widget.layout.h !== void 0)
            layoutStyle.height = toCssValue(widget.layout.h) || "";
        }
        if ("left" in layoutStyle || "top" in layoutStyle)
          layoutStyle.position = "absolute";
        return {
          id: widget.id,
          componentId: widget.componentId,
          component: entry?.component,
          componentProps: entry ? adaptStandardProps(entry.meta, widget.props) : widget.props?.componentProps || {},
          refreshInterval: widget.props?.refreshInterval,
          layoutStyle
        };
      });
    });
    const containerStyle = computed(() => {
      return {
        position: "relative",
        width: "100%",
        height: "100%",
        ...props.schema.style || {}
      };
    });
    watch(normalizedWidgets, (widgets) => {
      clearTimers();
      widgets.forEach((widget) => {
        if (!widget.refreshInterval || widget.refreshInterval <= 0)
          return;
        const timer = setInterval(() => {
          const rawWidget = props.schema.widgets.find((item) => item.id === widget.id);
          rawWidget && invokeReload(rawWidget);
        }, widget.refreshInterval);
        timerMap.set(widget.id, timer);
      });
    }, { immediate: true, deep: true });
    onBeforeUnmount(() => {
      clearTimers();
    });
    __expose({
      reload: () => {
        props.schema.widgets.forEach(invokeReload);
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: "dv-wgms-screen-renderer",
        style: normalizeStyle(containerStyle.value)
      }, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(normalizedWidgets.value, (widget) => {
          return openBlock(), createElementBlock("div", {
            key: widget.id,
            class: "dv-wgms-screen-renderer-item",
            style: normalizeStyle(widget.layoutStyle)
          }, [
            widget.component ? (openBlock(), createBlock(resolveDynamicComponent(widget.component), mergeProps({ key: 0 }, widget.componentProps, {
              ref_for: true,
              ref: (el) => setWidgetRef(widget.id, el)
            }), null, 16)) : (openBlock(), createElementBlock("div", _hoisted_1, " Missing component: " + toDisplayString(widget.componentId), 1))
          ], 4);
        }), 128))
      ], 4);
    };
  }
});

export { _sfc_main as default };