图层

report-ui/src/router/index.js

@@ -266,6 +266,14 @@ export const constantRouterMap = [
     component: () => import('@/views/screenDesigner/index'),
     name: 'screenDesigner', 
   },
+  {
+    path: '/screen/preview', 
+    component: () => import('@/views/screenDesigner/preview'), 
+    hidden: true, 
+    meta: { 
+      requireAuth: true 
+    }
+  },
   { 
     path: '/404', 
     component: () => import('@/views/404'), 

report-ui/src/views/screenDesigner/components/temp.vue

@@ -0,0 +1,53 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: qianlishi
+ * @Date: 2022-04-28 12:20:28
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2022-04-28 12:31:14
+-->
+<template>
+  <div>
+    <component :is="type" :value="value" :ispreview="true" />
+  </div>
+</template>
+
+<script>
+import widgetHref from "../widget/texts/widgetHref.vue";
+import WidgetIframe from "../widget/texts/widgetIframe.vue";
+import widgetImage from "../widget/texts/widgetImage.vue";
+import WidgetMarquee from "../widget/texts/widgetMarquee.vue";
+import widgetSlider from "../widget/texts/widgetSlider.vue";
+import widgetTable from "../widget/texts/widgetTable.vue";
+import widgetText from "../widget/texts/widgetText.vue";
+import widgetTime from "../widget/texts/widgetTime.vue";
+import widgetVideo from "../widget/texts/widgetVideo.vue";
+import widgetBarchart from "../widget/barCharts/widgetBarchart.vue";
+
+export default {
+  name: "WidgetTemp",
+  components: {
+    widgetHref,
+    WidgetIframe,
+    widgetImage,
+    WidgetMarquee,
+    widgetSlider,
+    widgetTable,
+    widgetText,
+    widgetTime,
+    widgetVideo,
+    widgetBarchart
+  },
+  model: {
+    prop: "value",
+    event: "input"
+  },
+  props: {
+    type: String,
+    value: {
+      type: [Object],
+      default: () => {}
+    }
+  }
+};
+</script>

report-ui/src/views/screenDesigner/index.vue

@@ -583,7 +583,7 @@ export default {
     // 预览
     viewScreen() {
       let routeUrl = this.$router.resolve({
-        path: "/bigscreen/viewer",
+        path: "/screen/preview",
         query: { reportCode: this.$route.query.reportCode }
       });
       window.open(routeUrl.href, "_blank");

report-ui/src/views/screenDesigner/preview.vue

@@ -1 +1,79 @@
+<!--
+ * @Descripttion: 大屏设置器
+ * @version: 
+ * @Author: qianlishi
+ * @Date: 2022-03-14 14:05:15
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2022-04-28 12:23:34
+-->
+<template>
+  <div class="layout">
+    <div :style="bigScreenStyle">
+      <widget
+        v-for="(widget, index) in widgets"
+        :key="index"
+        v-model="widget.value"
+        :type="widget.type"
+      />
+    </div>
+  </div>
+</template>
 
+<script>
+import widget from "./components/temp";
+import { detailDashboard } from "@/api/bigscreen";
+export default {
+  name: "Login",
+  components: {
+    widget
+  },
+  data() {
+    return {
+      bigScreenStyle: {},
+      widgets: []
+    };
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    async getData() {
+      const reportCode = this.$route.query.reportCode;
+      const { code, data } = await detailDashboard(reportCode);
+      if (code != 200) return;
+      const equipment = document.body.clientWidth;
+      const ratioEquipment = equipment / data.dashboard.width;
+      this.bigScreenStyle = {
+        width: data.dashboard.width + "px",
+        height: data.dashboard.height + "px",
+        "background-color": data.dashboard.backgroundColor,
+        "background-image": "url(" + data.dashboard.backgroundImage + ")",
+        "background-position": "0% 0%",
+        "background-size": "100% 100%",
+        "background-repeat": "initial",
+        "background-attachment": "initial",
+        "background-origin": "initial",
+        "background-clip": "initial",
+        transform: `scale(${ratioEquipment}, ${ratioEquipment})`,
+        "transform-origin": "0 0"
+      };
+      this.widgets = data.dashboard.widgets;
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.layout {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+.bottom-text {
+  width: 100%;
+  color: #a0a0a0;
+  position: fixed;
+  bottom: 16px;
+  z-index: 9999;
+}
+</style>