shalu-bigscreen-desiner/src/views/view/index.vue

<template>
  <div class="player-page" :style="bodyStyle">
    <div class="page-wrapper" :style="pageWapperStyle">
      <RenderComponent v-for="element in getElements" :key="element.key" :element="element"/>
      <Result
        v-if="!currentPage"
        status="warning"
        title="很抱歉！当前项目未知错误."
        subTitle="请联系管理员"
      >
        <template #extra>
          <Button key="console" type="primary" @click="$router.replace('/')">返回首页</Button>
        </template>
      </Result>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CustomElement, ProjectInfo } from '#/project';
import { ref, onMounted, onBeforeUnmount, StyleValue, computed } from "vue";
import { Result, Button } from "ant-design-vue";
import RenderComponent from "./component/RenderComponent.vue";
import { ScreenFillEnum } from "@/enum/screenFillEnum";

const projectInfo = JSON.parse(localStorage.getItem("currentProject") || "{}") as ProjectInfo;
document.title = `${projectInfo?.name || '沙鲁大屏项目'}--沙鲁低码平台`;
const currentPage = ref(projectInfo.pages?.[0]);
const pageWapperStyle = ref<StyleValue>();
const bodyStyle = ref<StyleValue>();

const getElements = computed(() => {
  const list: CustomElement[] = [];
  (currentPage.value?.elements || []).forEach((item) => {
    if(item.componentType === 'group') {
      item.children?.forEach((child) => {
        child.container.props.x += item.container.props.x;
        child.container.props.y += item.container.props.y;
        list.push(child);
      });
    } else {
      list.push(item);
    }
  });

  return list;
});

// 页面样式
const getWapperStyle = () => {
  if (!currentPage.value) return;

  const { background } = currentPage.value;
  const pageBackground =
    background.type === "color"
      ? { background: background.color }
      : {
          background: `url(${background.image}) no-repeat center center`,
          backgroundSize: background.fillType,
        };
  const { width = 1280, height = 720 } = projectInfo;
  const { clientWidth, clientHeight } = document.documentElement;

  let scale: string | number = 1;
  switch (projectInfo.fillType) {
    case ScreenFillEnum.FILL_HEIGHT:
      scale = clientHeight / height;
      break;
    case ScreenFillEnum.FILL_WIDTH:
      scale = clientWidth / width;
      break;
    case ScreenFillEnum.FILL_BOTH:
      const scaleX = clientWidth / width;
      const scaleY = clientHeight / height;
      scale = `${scaleX},${scaleY}`;
      break;
    default:
      scale = Math.min(clientWidth / width, clientHeight / height);
  }

  bodyStyle.value = {
    background: '#000',
  } as unknown as StyleValue;
  pageWapperStyle.value = {
    position: 'absolute',
    left: '50%',
    top: '50%',
    width: `${width}px`,
    height: `${height}px`,
    overflow: "hidden",
    // border: "1px solid #f0f0f0",
    boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
    transform: `scale(${scale}) translate(-50%, -50%)`,
    transformOrigin: "0 0",
    ...pageBackground,
  } as unknown as StyleValue;
};

onMounted(() => {
  getWapperStyle();
  window.addEventListener("resize", getWapperStyle);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getWapperStyle);
});
</script>

<style lang="less" scoped>
.player-page {
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: hidden;
}
</style>