diff --git a/report-ui/src/router/index.js b/report-ui/src/router/index.js
index 653cc140..7f6f62bf 100644
--- a/report-ui/src/router/index.js
+++ b/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'), 
diff --git a/report-ui/src/views/screenDesigner/components/temp.vue b/report-ui/src/views/screenDesigner/components/temp.vue
new file mode 100644
index 00000000..d38f77ce
--- /dev/null
+++ b/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>
diff --git a/report-ui/src/views/screenDesigner/index.vue b/report-ui/src/views/screenDesigner/index.vue
index 006d6be3..f4e4747d 100644
--- a/report-ui/src/views/screenDesigner/index.vue
+++ b/report-ui/src/views/screenDesigner/index.vue
@@ -76,17 +76,17 @@
           <span slot="label" class="icon"
             ><i class="el-icon-date icon"></i>图层</span
           >
-          <div class="tools-item">
-            <span class="tools-item-icon">
-              <i class="iconfont iconkuangjia"></i>
-            </span>
-            <span class="tools-item-text">内联框架</span>
-          </div>
-          <div class="tools-item">
+          <div
+            v-for="(item, index) in layerWidget"
+            :key="'item' + index"
+            class="tools-item"
+            :class="widgetIndex == index ? 'is-active' : ''"
+            @click="layerClick(index)"
+          >
             <span class="tools-item-icon">
-              <i class="iconfont iconkuangjia"></i>
+              <i class="iconfont" :class="item.icon"></i>
             </span>
-            <span class="tools-item-text">内联框架</span>
+            <span class="tools-item-text">{{ item.label }}</span>
           </div>
         </el-tab-pane>
       </el-tabs>
@@ -463,7 +463,10 @@ export default {
       this.activeName = "first";
       this.widgetOptions = screenConfig["options"];
     },
-
+    layerClick(index) {
+      this.widgetIndex = index;
+      this.widgetsClick(index);
+    },
     // 如果是点击某个组件，获取该组件的配置项
     setOptionsOnClickWidget(obj) {
       console.log(obj);
@@ -580,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");
diff --git a/report-ui/src/views/screenDesigner/preview.vue b/report-ui/src/views/screenDesigner/preview.vue
index 8b137891..1ce75982 100644
--- a/report-ui/src/views/screenDesigner/preview.vue
+++ b/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>