From e55e0fc2cc0e0fbdab6730f39dd663fd08bc58ad Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Fri, 24 Jun 2022 17:03:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E5=BA=94=E7=94=A8=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=95=B4=E5=90=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/bigscreen/designer/AppDesigner.vue   |  31 +-
 .../bigscreen/designer/components/Add.vue     |  43 +-
 .../bigscreen/designer/components/List.vue    | 247 ++++---
 .../designer/components/SourceData.vue        | 624 +++++++++---------
 .../bigscreen/designer/components/preview.vue |  58 ++
 5 files changed, 509 insertions(+), 494 deletions(-)
 create mode 100644 packages/bigscreen/designer/components/preview.vue

diff --git a/packages/bigscreen/designer/AppDesigner.vue b/packages/bigscreen/designer/AppDesigner.vue
index daf05eba..bb83fc23 100644
--- a/packages/bigscreen/designer/AppDesigner.vue
+++ b/packages/bigscreen/designer/AppDesigner.vue
@@ -1,34 +1,19 @@
 <template>
-  <ai-list v-if="!isShowDetail">
-    <template slot="title">
-      <ai-title title="大屏列表" :isShowBottomBorder="false" :instance="instance"></ai-title>
-    </template>
-    <template slot="tabs">
-      <el-tabs v-model="currIndex">
-        <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
-          <component :urlPrefix="urlPrefix" :areaId="areaId" :ref="tab.name" v-if="currIndex == i" :is="tab.comp" @change="onChange" lazy :instance="instance"
-                     :dict="dict" :permissions="permissions"/>
-        </el-tab-pane>
-      </el-tabs>
-    </template>
-  </ai-list>
-  <Add v-else-if="componentName === 'Add'" :urlPrefix="urlPrefix" :areaId="areaId" :params="params" :instance="instance" :dict="dict" :permissions="permissions"
-       @change="onChange"></Add>
-  <SourceData v-else-if="componentName === 'SourceData'" :urlPrefix="urlPrefix" :params="params" :instance="instance" :dict="dict" :permissions="permissions"
-              @change="onChange"></SourceData>
+  <section class="AppDesigner">
+    <component :is="currentPage" v-bind="$props"/>
+  </section>
 </template>
 
 <script>
 import List from './components/List.vue'
 import Add from './components/Add'
 import SourceData from './components/SourceData'
+import Preview from "./components/preview";
 
 export default {
   name: 'AppDesigner',
   label: '大屏设计',
-
-  components: {List, Add, SourceData},
-
+  components: {Preview, List, Add, SourceData},
   props: {
     instance: Function,
     dict: Object,
@@ -40,6 +25,12 @@ export default {
   },
 
   computed: {
+    currentPage() {
+      const {hash} = this.$route
+      return hash == "#sourceData" ? SourceData :
+          hash == "#add" ? Add :
+              hash == "#preview" ? Preview : List
+    },
     tabs() {
       return [
         {label: '大屏列表', name: 'FormList', comp: List, permission: ''}
diff --git a/packages/bigscreen/designer/components/Add.vue b/packages/bigscreen/designer/components/Add.vue
index 249d05dc..5868997f 100644
--- a/packages/bigscreen/designer/components/Add.vue
+++ b/packages/bigscreen/designer/components/Add.vue
@@ -1,8 +1,7 @@
 <template>
   <ai-detail>
     <template slot="title">
-      <ai-title :title="id ? '编辑项目' : '添加项目'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
-      </ai-title>
+      <ai-title :title="id ? '编辑项目' : '添加项目'" isShowBack isShowBottomBorder @onBackClick="cancel"/>
     </template>
     <template slot="content">
       <el-form ref="form" :model="form" label-width="110px" label-position="right">
@@ -64,14 +63,6 @@
           :theme="config.theme"
           @close="isShowLayout = false">
       </Layout>
-      <ai-dv-wrapper :views="[{label: '返回'}]" :theme="config.theme" @change="screenId = false" v-if="screenId" :title="form.name">
-        <ai-dv-background
-            :theme="config.theme"
-            v-if="config.length || config.theme === '1'"
-            :src="config.theme === '1' ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj-bg.png' : config.backgroundImage[0].url">
-        </ai-dv-background>
-        <app-gigscreen-viewer :urlPrefix="urlPrefix" :instance="instance" :dict="dict" :id="screenId"/>
-      </ai-dv-wrapper>
       <ai-dialog :visible.sync="dialog" title="定制大屏" @closed="custom={}" @onConfirm="handleCustomizedDV">
         <el-form ref="CustomDVFrom" size="small" :model="custom" :rules="rules" label-width="80px">
           <el-form-item label="大屏标题" prop="title">
@@ -103,7 +94,6 @@ export default {
   props: {
     instance: Function,
     dict: Object,
-    params: Object,
     urlPrefix: String
   },
   inject: {
@@ -145,24 +135,18 @@ export default {
 
   created() {
     this.dict.load('customizedDVs')
-    if (this.params && this.params.id) {
-      this.id = this.params.id
-      this.getInfo(this.params.id)
-    }
+    this.getInfo()
   },
 
-  mounted() {
-
-  },
 
   methods: {
-    getInfo(id) {
+    getInfo() {
+      let {id} = this.$route.query
       this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenProjectDetailById?id=${id}`).then(res => {
-        if (res.code === 0) {
+        if (res?.data) {
           this.form = {
             ...res.data
           }
-
           if (res.data.relationLsIds) {
             this.tableData = res.data.lsList.map(v => {
               let conf = JSON.parse(v.config || '') || {}
@@ -195,14 +179,8 @@ export default {
     },
 
     toViewer(id) {
-      this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
-        if (res.data) {
-          this.config = JSON.parse(res.data.config).dashboard
-        }
-      })
-      this.screenId = id
+      this.$router.push({query: {id}, hash: "#preview"})
     },
-
     onChange(e) {
       const ids = this.tableData.map(v => v.id)
       if (ids.indexOf(e.id) < 0) {
@@ -260,7 +238,7 @@ export default {
 
               this.home && this.home.refreshDvOptions && this.home.refreshDvOptions()
               setTimeout(() => {
-                this.cancel(true)
+                this.cancel()
               }, 600)
             }
           })
@@ -268,11 +246,8 @@ export default {
       })
     },
 
-    cancel(isRefresh) {
-      this.$emit('change', {
-        type: 'list',
-        isRefresh: !!isRefresh
-      })
+    cancel() {
+      this.$router.push({})
     },
 
     handleCustomizedDV() {
diff --git a/packages/bigscreen/designer/components/List.vue b/packages/bigscreen/designer/components/List.vue
index e46c9fe6..a8a0eb9a 100644
--- a/packages/bigscreen/designer/components/List.vue
+++ b/packages/bigscreen/designer/components/List.vue
@@ -1,38 +1,39 @@
 <template>
-  <ai-list class="form-list" isTabs style="width: 100%">
+  <ai-list>
+    <ai-title slot="title" title="大屏列表" isShowBottomBorder/>
     <template slot="content">
       <ai-search-bar>
         <template #left>
           <ai-select
-            v-model="search.status"
-            @change="search.current = 1, getList()"
-            placeholder="发布状态"
-            :selectList="dict.getDict('cwpStatus')">
+              v-model="search.status"
+              @change="search.current = 1, getList()"
+              placeholder="发布状态"
+              :selectList="dict.getDict('cwpStatus')">
           </ai-select>
           <el-button type="primary" @click="toEdit('')">添加大屏</el-button>
           <el-button type="primary" @click="toAddData">数据源管理</el-button>
         </template>
         <template #right>
           <el-input
-            v-model="search.name"
-            size="small"
-            placeholder="请输入模板名称或创建人"
-            clearable
-            v-throttle="() => {search.current = 1, getList()}"
-            @clear="search.current = 1, search.title = '', getList()"
-            suffix-icon="iconfont iconSearch">
+              v-model="search.name"
+              size="small"
+              placeholder="请输入模板名称或创建人"
+              clearable
+              v-throttle="() => {search.current = 1, getList()}"
+              @clear="search.current = 1, search.title = '', getList()"
+              suffix-icon="iconfont iconSearch">
           </el-input>
         </template>
       </ai-search-bar>
       <ai-table
-        :tableData="tableData"
-        :col-configs="colConfigs"
-        :total="total"
-        v-loading="loading"
-        style="margin-top: 6px;"
-        :current.sync="search.current"
-        :size.sync="search.size"
-        @getList="getList">
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="total"
+          v-loading="loading"
+          style="margin-top: 6px;"
+          :current.sync="search.current"
+          :size.sync="search.size"
+          @getList="getList">
         <el-table-column slot="options" width="160px" fixed="right" label="操作" align="center">
           <template slot-scope="{ row }">
             <div class="table-options">
@@ -43,11 +44,11 @@
         </el-table-column>
       </ai-table>
       <ai-dialog
-        :visible.sync="isShowAdd"
-        width="780px"
-        title="复制大屏"
-        @close="onClose"
-        @onConfirm="onConfirm">
+          :visible.sync="isShowAdd"
+          width="780px"
+          title="复制大屏"
+          @close="onClose"
+          @onConfirm="onConfirm">
         <el-form ref="form" :model="form" label-width="110px" label-position="right">
           <div class="ai-form" :model="form" label-width="110px" label-position="right">
             <el-form-item label="名称" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
@@ -61,118 +62,106 @@
 </template>
 
 <script>
-  export default {
-    name: 'FormList',
-    props: {
-      instance: Function,
-      dict: Object,
-      areaId: String,
-      urlPrefix: String
+export default {
+  name: 'FormList',
+  props: {
+    instance: Function,
+    dict: Object,
+    areaId: String,
+    urlPrefix: String
+  },
+
+  data() {
+    return {
+      search: {
+        current: 1,
+        status: '',
+        size: 10,
+        name: ''
+      },
+      form: {
+        name: ''
+      },
+      id: '',
+      isShowAdd: false,
+      colConfigs: [
+        {prop: 'name', label: '模板名称'},
+        {prop: 'createUserName', align: 'center', label: '创建人'},
+        {prop: 'description', align: 'center', label: '描述'},
+        {prop: 'status', align: 'center', label: '状态', formart: v => this.dict.getLabel('cwpStatus', v)},
+        {prop: 'createTime', align: 'center', label: '创建时间'}
+      ],
+      tableData: [],
+      total: 0,
+      loading: false
+    }
+  },
+
+  created() {
+
+    this.dict.load('cwpStatus').then(() => {
+      this.getList()
+    })
+  },
+
+  mounted() {
+    this.loading = true
+  },
+
+  methods: {
+    copy(id) {
+      this.id = id
+      this.isShowAdd = true
     },
 
-    data () {
-      return {
-        search: {
-          current: 1,
-          status: '',
-          size: 10,
-          name: ''
-        },
-        form: {
-          name: ''
-        },
-        id: '',
-        isShowAdd: false,
-        colConfigs: [
-          { prop: 'name', label: '模板名称' },
-          { prop: 'createUserName', align: 'center', label: '创建人' },
-          { prop: 'description', align: 'center', label: '描述' },
-          { prop: 'status', align: 'center', label: '状态', formart: v => this.dict.getLabel('cwpStatus', v) },
-          { prop: 'createTime', align: 'center', label: '创建时间' }
-        ],
-        tableData: [],
-        total: 0,
-        loading: false
-      }
+    onClose() {
+      this.id = ''
+      this.form.name = ''
     },
 
-    created () {
-      
-      this.dict.load('cwpStatus').then(() => {
-        this.getList()
+    onConfirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.instance.post(`${this.urlPrefix}/appdiylargescreen/copyLargeScreenProject`, null, {
+            params: {
+              ...this.form,
+              id: this.id
+            }
+          }).then(res => {
+            if (res.code === 0) {
+              this.$message.success('复制成功')
+              this.isShowAdd = false
+
+              this.getList()
+            }
+          })
+        }
       })
     },
 
-    mounted () {
-      this.loading = true
-    },
-
-    methods: {
-      copy (id) {
-        this.id = id
-        this.isShowAdd = true
-      },
-
-      onClose () {
-        this.id = ''
-        this.form.name = ''
-      },
-
-      onConfirm () {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            this.instance.post(`${this.urlPrefix}/appdiylargescreen/copyLargeScreenProject`, null, {
-              params: {
-                ...this.form,
-                id: this.id
-              }
-            }).then(res => {
-              if (res.code === 0) {
-                this.$message.success('复制成功')
-                this.isShowAdd = false
-
-                this.getList()
-              }
-            })
-          }
-        })
-      },
-
-      getList () {
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/allLargeScreenProjectByPage`, null, {
-          params: {
-            ...this.search
-          }
-        }).then(res => {
-          if (res.code == 0) {
-            this.tableData = res.data.records
-            this.total = res.data.total
-            this.loading = false
-          } else {
-            this.loading = false
-          }
-        }).catch(() => {
+    getList() {
+      this.instance.post(`${this.urlPrefix}/appdiylargescreen/allLargeScreenProjectByPage`, null, {
+        params: {
+          ...this.search
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
           this.loading = false
-        })
-      },
-
-      toEdit (id) {
-        this.$emit('change', {
-          type: 'add',
-          params: {
-            id: id || ''
-          }
-        })
-      },
-
-      toAddData () {
-        this.$emit('change', {
-          type: 'SourceData'
-        })
-      }
+        } else {
+          this.loading = false
+        }
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    toEdit(id) {
+      this.$router.push({hash: "#add", query: {id}})
+    },
+    toAddData() {
+      this.$router.push({hash: "#sourceData"})
     }
   }
+}
 </script>
-
-<style scoped lang="scss">
-</style>
diff --git a/packages/bigscreen/designer/components/SourceData.vue b/packages/bigscreen/designer/components/SourceData.vue
index b116f15d..7af308dc 100644
--- a/packages/bigscreen/designer/components/SourceData.vue
+++ b/packages/bigscreen/designer/components/SourceData.vue
@@ -1,7 +1,7 @@
 <template>
   <ai-detail>
     <template slot="title">
-      <ai-title title="数据源" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      <ai-title title="数据源" isShowBack isShowBottomBorder @onBackClick="cancel">
       </ai-title>
     </template>
     <template slot="content">
@@ -13,25 +13,25 @@
           <ai-search-bar class="search-bar">
             <template slot="right">
               <el-input
-                v-model="search.name"
-                size="small"
-                v-throttle="() => {search.current = 1, getList()}"
-                placeholder="请输入名字"
-                clearable
-                @clear="search.current = 1, search.name = '', getList()"
-                suffix-icon="iconfont iconSearch">
+                  v-model="search.name"
+                  size="small"
+                  v-throttle="() => {search.current = 1, getList()}"
+                  placeholder="请输入名字"
+                  clearable
+                  @clear="search.current = 1, search.name = '', getList()"
+                  suffix-icon="iconfont iconSearch">
               </el-input>
             </template>
           </ai-search-bar>
           <ai-table
-            :tableData="tableData"
-            :col-configs="colConfigs"
-            :total="total"
-            style="margin-top: 6px;"
-            :border="true"
-            :current.sync="search.current"
-            :size.sync="search.size"
-            @getList="getList">
+              :tableData="tableData"
+              :col-configs="colConfigs"
+              :total="total"
+              style="margin-top: 6px;"
+              :border="true"
+              :current.sync="search.current"
+              :size.sync="search.size"
+              @getList="getList">
             <el-table-column slot="options" width="160px" fixed="right" label="操作" align="center">
               <template slot-scope="{ row }">
                 <div class="table-options">
@@ -44,18 +44,18 @@
         </template>
       </ai-card>
       <ai-dialog
-        :visible.sync="isShow"
-        width="920px"
-        title="数据源"
-        @close="onClose"
-        @onConfirm="onConfirm">
+          :visible.sync="isShow"
+          width="920px"
+          title="数据源"
+          @close="onClose"
+          @onConfirm="onConfirm">
         <el-form ref="form" :model="form" label-width="110px" label-position="right">
           <div class="ai-form">
             <el-form-item label="数据源描述" style="width: 100%;" prop="description" :rules="[{ required: true, message: '请输入数据源描述', trigger: 'blur' }]">
               <el-input
-                size="small"
-                placeholder="请输入数据源描述"
-                v-model="form.description">
+                  size="small"
+                  placeholder="请输入数据源描述"
+                  v-model="form.description">
               </el-input>
             </el-form-item>
             <el-form-item label="类型" style="width: 100%;" prop="dataRange" :rules="[{ required: true, message: '请选择数据范围', trigger: 'change' }]">
@@ -64,56 +64,61 @@
                 <el-radio label="1">SQL</el-radio>
               </el-radio-group>
             </el-form-item>
-            <el-form-item v-if="form.type === '1'" label="sql语句" style="width: 100%;" prop="description" :rules="[{ required: true, message: '请输入sql语句', trigger: 'blur' }]">
+            <el-form-item v-if="form.type === '1'" label="sql语句" style="width: 100%;" prop="description"
+                          :rules="[{ required: true, message: '请输入sql语句', trigger: 'blur' }]">
               <el-input
-                :rows="8"
-                size="small"
-                type="textarea"
-                placeholder="请输入数据源描述"
-                v-model="form.sqlContent">
+                  :rows="8"
+                  size="small"
+                  type="textarea"
+                  placeholder="请输入数据源描述"
+                  v-model="form.sqlContent">
               </el-input>
             </el-form-item>
-            <el-form-item v-if="form.type === '0'" label="村微应用" style="width: 100%;" prop="appId" :rules="[{ required: true, message: '请选择村微应用', trigger: 'change' }]">
+            <el-form-item v-if="form.type === '0'" label="村微应用" style="width: 100%;" prop="appId"
+                          :rules="[{ required: true, message: '请选择村微应用', trigger: 'change' }]">
               <el-select size="small" style="width: 100%;" v-model="form.appId" placeholder="请选择村微应用" @change="onAppChange">
                 <el-option
-                  v-for="item in appList"
-                  :key="item.id"
-                  :label="item.appName"
-                  :value="item.id">
+                    v-for="item in appList"
+                    :key="item.id"
+                    :label="item.appName"
+                    :value="item.id">
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item v-if="form.type === '0'" label="数据范围" style="width: 100%;" prop="dataRange" :rules="[{ required: true, message: '请选择数据范围', trigger: 'change' }]">
+            <el-form-item v-if="form.type === '0'" label="数据范围" style="width: 100%;" prop="dataRange"
+                          :rules="[{ required: true, message: '请选择数据范围', trigger: 'change' }]">
               <el-radio-group v-model="form.dataRange">
                 <el-radio label="0">全部</el-radio>
                 <el-radio label="1">自定义条数</el-radio>
               </el-radio-group>
             </el-form-item>
-            <el-form-item label="数据条数" style="width: 100%;" v-if="form.dataRange === '1' && form.type === '0'" prop="count" :rules="[{ required: true, message: '请输入数据条数', trigger: 'blur' }]">
+            <el-form-item label="数据条数" style="width: 100%;" v-if="form.dataRange === '1' && form.type === '0'" prop="count"
+                          :rules="[{ required: true, message: '请输入数据条数', trigger: 'blur' }]">
               <el-input
-                size="small"
-                placeholder="请输入数据条数"
-                v-model="form.count">
+                  size="small"
+                  placeholder="请输入数据条数"
+                  v-model="form.count">
               </el-input>
             </el-form-item>
             <div v-if="form.type === '0'">
               <el-form-item :label="'统计项' + index" style="width: 100%;" v-for="(item, index) in form.statisticsConfigs" :key="'statisticsConfigs' + index">
                 <div class="form-flex">
                   <div>
-                    <el-select size="small" style="width: 160px;" v-model="item.fieldName" @change="e => onChooseField('statisticsConfigs', e, index)" placeholder="请选择" clearable>
+                    <el-select size="small" style="width: 160px;" v-model="item.fieldName" @change="e => onChooseField('statisticsConfigs', e, index)"
+                               placeholder="请选择" clearable>
                       <el-option
-                        v-for="(item, index) in filedList"
-                        :key="index"
-                        :label="item.fieldCnName"
-                        :value="item.fieldName">
+                          v-for="(item, index) in filedList"
+                          :key="index"
+                          :label="item.fieldCnName"
+                          :value="item.fieldName">
                       </el-option>
                     </el-select>
                     <el-select size="small" style="margin: 0 10px; width: 160px;" v-model="item.calcType" placeholder="请选择" clearable>
                       <el-option
-                        v-for="item in dict.getDict('diyLargeScreenDatasourceCalcType2')"
-                        :key="item.id"
-                        :label="item.dictName"
-                        :value="item.dictValue">
+                          v-for="item in dict.getDict('diyLargeScreenDatasourceCalcType2')"
+                          :key="item.id"
+                          :label="item.dictName"
+                          :value="item.dictValue">
                       </el-option>
                     </el-select>
                     <el-input size="small" style="width: 165px;" placeholder="请输入别名" v-model="item.alias"></el-input>
@@ -131,10 +136,10 @@
                   <div>
                     <el-select size="small" style="width: 160px;" v-model="item.fieldName" placeholder="请选择" clearable>
                       <el-option
-                        v-for="item in filedList"
-                        :key="item.id"
-                        :label="item.fieldCnName"
-                        :value="item.fieldName">
+                          v-for="item in filedList"
+                          :key="item.id"
+                          :label="item.fieldCnName"
+                          :value="item.fieldName">
                       </el-option>
                     </el-select>
                   </div>
@@ -151,18 +156,18 @@
                   <div>
                     <el-select size="small" style="width: 160px;" v-model="item.fieldName" placeholder="请选择" clearable>
                       <el-option
-                        v-for="item in filedList"
-                        :key="item.id"
-                        :label="item.fieldCnName"
-                        :value="item.fieldName">
+                          v-for="item in filedList"
+                          :key="item.id"
+                          :label="item.fieldCnName"
+                          :value="item.fieldName">
                       </el-option>
                     </el-select>
                     <el-select size="small" style="width: 160px; margin-left: 10px;" v-model="item.orderType" placeholder="请选择" clearable>
                       <el-option
-                        v-for="item in orderTypeDict"
-                        :key="item.id"
-                        :label="item.label"
-                        :value="item.value">
+                          v-for="item in orderTypeDict"
+                          :key="item.id"
+                          :label="item.label"
+                          :value="item.value">
                       </el-option>
                     </el-select>
                   </div>
@@ -181,277 +186,274 @@
 </template>
 
 <script>
-  export default {
-    name: 'SourceData',
+export default {
+  name: 'SourceData',
 
-    props: {
-      instance: Function,
-      dict: Object,
-      params: Object,
-      urlPrefix: String
-    },
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object,
+    urlPrefix: String
+  },
 
-    data () {
-      return {
-        isShow: false,
-        search: {
-          current: 1,
-          size: 10,
-          name: ''
+  data() {
+    return {
+      isShow: false,
+      search: {
+        current: 1,
+        size: 10,
+        name: ''
+      },
+      total: 0,
+      colConfigs: [
+        {prop: 'appName', label: '应用名'},
+        {prop: 'appTableName', align: 'center', label: '表名'},
+        {prop: 'description', align: 'center', label: '描述'},
+        {prop: 'type', align: 'center', label: '类型', formart: v => v === '0' ? '村微应用' : 'sql语句'},
+        {prop: 'createUserName', align: 'center', label: '创建人'},
+        {prop: 'createTime', align: 'center', label: '创建时间'}
+      ],
+      tableData: [],
+      filedList: [],
+      appList: [],
+      form: {
+        orderType: 'asc',
+        dataRange: '0',
+        type: '0',
+        sqlContent: '',
+        appId: '',
+        description: '',
+        appName: '',
+        appTableName: '',
+        count: '100',
+        statisticsConfigs: [{
+          alias: '',
+          calcType: '',
+          dictCode: '',
+          fieldCnName: '',
+          fieldName: ''
+        }],
+        orderConfigs: [{
+          alias: '',
+          calcType: '',
+          dictCode: '',
+          fieldCnName: '',
+          fieldName: ''
+        }],
+        groupConfigs: [{
+          alias: '',
+          calcType: '',
+          dictCode: '',
+          fieldCnName: '',
+          fieldName: ''
+        }]
+      },
+      id: '',
+      orderTypeDict: [
+        {
+          value: 'asc',
+          label: '升序'
         },
-        total: 0,
-        colConfigs: [
-          { prop: 'appName', label: '应用名' },
-          { prop: 'appTableName', align: 'center', label: '表名' },
-          { prop: 'description', align: 'center', label: '描述' },
-          { prop: 'type', align: 'center', label: '类型', formart: v => v === '0' ? '村微应用' : 'sql语句' },
-          { prop: 'createUserName', align: 'center', label: '创建人' },
-          { prop: 'createTime', align: 'center', label: '创建时间' }
-        ],
-        tableData: [],
-        filedList: [],
-        appList: [],
-        form: {
-          orderType: 'asc',
-          dataRange: '0',
-          type: '0',
-          sqlContent: '',
-          appId: '',
-          description: '',
-          appName: '',
-          appTableName: '',
-          count: '100',
-          statisticsConfigs: [{
-            alias: '',
-            calcType: '',
-            dictCode: '',
-            fieldCnName: '',
-            fieldName: ''
-          }],
-          orderConfigs: [{
-            alias: '',
-            calcType: '',
-            dictCode: '',
-            fieldCnName: '',
-            fieldName: ''
-          }],
-          groupConfigs: [{
-            alias: '',
-            calcType: '',
-            dictCode: '',
-            fieldCnName: '',
-            fieldName: ''
-          }]
-        },
-        id: '',
-        orderTypeDict: [
-          {
-            value: 'asc',
-            label: '升序'
-          },
-          {
-            value: 'desc',
-            label: '降序'
+        {
+          value: 'desc',
+          label: '降序'
+        }
+      ]
+    }
+  },
+
+  created() {
+    this.dict.load(['diyLargeScreenDatasourceCalcType2']).then(() => {
+      this.getList()
+      this.getAppList()
+    })
+  },
+
+  methods: {
+    getInfo(id) {
+      this.instance.post(`${this.urlPrefix}/wxcp/wxuser/queryDetailById?id=${id}`).then(res => {
+        if (res.code === 0) {
+          this.form = {
+            ...res.data
           }
-        ]
-      }
-    },
-
-    created () {
-      this.dict.load(['diyLargeScreenDatasourceCalcType2']).then(() => {
-        this.getList()
-        this.getAppList()
+        }
       })
     },
 
-    methods: {
-      getInfo (id) {
-        this.instance.post(`${this.urlPrefix}/wxcp/wxuser/queryDetailById?id=${id}`).then(res => {
-          if (res.code === 0) {
-            this.form = {
-              ...res.data
-            }
+    onChooseField(type, fieldName, index) {
+      const dictCode = this.filedList.filter(v => v.fieldName === fieldName)[0].dictCode
+      this.$set(this.form[type][index], 'dictCode', dictCode)
+    },
+
+    add(type) {
+      this.form[type].push({
+        alias: '',
+        calcType: '',
+        dictCode: '',
+        fieldCnName: '',
+        fieldName: ''
+      })
+    },
+
+    removeConfig(type, index) {
+      this.form[type].splice(index, 1)
+    },
+
+    toEdit(e) {
+      this.id = e.id
+      this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryDatasourceDetailById?id=${e.id}`).then(res => {
+        if (res.code === 0) {
+          this.form = {
+            ...res.data
           }
-        })
-      },
 
-      onChooseField (type, fieldName, index) {
-        const dictCode = this.filedList.filter(v => v.fieldName === fieldName)[0].dictCode
-        this.$set(this.form[type][index], 'dictCode', dictCode)
-      },
-
-      add (type) {
-        this.form[type].push({
-          alias: '',
-          calcType: '',
-          dictCode: '',
-          fieldCnName: '',
-          fieldName: ''
-        })
-      },
-
-      removeConfig (type, index) {
-        this.form[type].splice(index, 1)
-      },
-
-      toEdit (e) {
-        this.id = e.id
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryDatasourceDetailById?id=${e.id}`).then(res => {
-          if (res.code === 0) {
-            this.form = {
-              ...res.data
-            }
-
-            this.form.dataRange = this.form.dataRange === '0' ? '0' : '1'
-            this.form.count = res.data.dataRange
-            this.filedList = this.appList.filter(v => v.id === res.data.appId).length && this.appList.filter(v => v.id === res.data.appId)[0].fields.map(item => {
-              let value = []
-              res.data.configs.forEach(v => {
-                if (v.fieldName === item.fieldName) {
-                  value.push(v.calcType)
-                }
-              })
-
-              return {
-                ...item,
-                value
+          this.form.dataRange = this.form.dataRange === '0' ? '0' : '1'
+          this.form.count = res.data.dataRange
+          this.filedList = this.appList.filter(v => v.id === res.data.appId).length && this.appList.filter(v => v.id === res.data.appId)[0].fields.map(item => {
+            let value = []
+            res.data.configs.forEach(v => {
+              if (v.fieldName === item.fieldName) {
+                value.push(v.calcType)
               }
             })
-            this.isShow = true
+
+            return {
+              ...item,
+              value
+            }
+          })
+          this.isShow = true
+        }
+      })
+    },
+
+    remove(id) {
+      this.$confirm('确定删除该数据？').then(() => {
+        this.instance.post(`${this.urlPrefix}/appquestionnairetemplate/delete?id=${id}`).then(res => {
+          if (res.code == 0) {
+            this.$message.success('删除成功！')
+            this.getList()
           }
         })
-      },
+      })
+    },
+
+    getList() {
+      this.instance.post(`${this.urlPrefix}/appdiylargescreen/allDatasourceByPage`, null, {
+        params: {
+          ...this.search
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      })
+    },
+
+    getAppList() {
+      this.instance.post(`${this.urlPrefix}/appdiylargescreen/allDatasourceApp`).then(res => {
+        if (res.code === 0) {
+          this.appList = res.data
+        }
+      })
+    },
+
+    onClose() {
+      this.id = ''
+      this.form.orderType = 'asc'
+      this.form.dataRange = 0
+      this.form.appId = ''
+      this.form.description = ''
+      this.form.appName = ''
+      this.form.appTableName = ''
+      this.form.count = 100
+    },
+
+    onAppChange(e) {
+      const value = this.appList.filter(v => v.id === e)[0]
+      this.form.appTableName = value.appTableName
+      this.form.appName = value.appName
+      this.form.statisticsConfigs = [{
+        alias: '',
+        calcType: '',
+        dictCode: '',
+        fieldCnName: '',
+        fieldName: ''
+      }]
+      this.form.orderConfigs = [{
+        alias: '',
+        calcType: '',
+        dictCode: '',
+        fieldCnName: '',
+        fieldName: ''
+      }]
+      this.form.groupConfigs = [{
+        alias: '',
+        calcType: '',
+        dictCode: '',
+        fieldCnName: '',
+        fieldName: ''
+      }]
+      this.filedList = value.fields.map(v => {
+        return {
+          ...v,
+          value: ''
+        }
+      })
+    },
+
+    onConfirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          let configs = []
+
+          if (this.filedList.length) {
+            this.filedList.forEach(item => {
+              if (item.value.length) {
+                item.value.forEach(v => {
+                  configs.push({
+                    alias: item.fieldCnName,
+                    calcType: v,
+                    fieldCnName: item.fieldCnName,
+                    fieldName: item.fieldName,
+                    dictCode: item.dictCode,
+                    orderType: this.orderType
+                  })
+                })
+              }
+            })
+          }
+
+          this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateDatasource`, {
+            ...this.form,
+            configs,
+            id: this.id ? this.id : '',
+            dataRange: this.form.dataRange === '0' ? 0 : this.form.count
+          }).then(res => {
+            if (res.code === 0) {
+              this.$message.success(this.id ? '编辑成功' : '添加成功')
+              this.search.current = 1
+              this.isShow = false
 
-      remove (id) {
-        this.$confirm('确定删除该数据？').then(() => {
-          this.instance.post(`${this.urlPrefix}/appquestionnairetemplate/delete?id=${id}`).then(res => {
-            if (res.code == 0) {
-              this.$message.success('删除成功！')
               this.getList()
             }
           })
-        })
-      },
+        }
+      })
+    },
 
-      getList () {
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/allDatasourceByPage`, null, {
-          params: {
-            ...this.search
-          }
-        }).then(res => {
-          if (res.code == 0) {
-            this.tableData = res.data.records
-            this.total = res.data.total
-          }
-        })
-      },
-
-      getAppList () {
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/allDatasourceApp`).then(res => {
-          if (res.code === 0) {
-            this.appList = res.data
-          }
-        })
-      },
-
-      onClose () {
-        this.id = ''
-        this.form.orderType = 'asc'
-        this.form.dataRange = 0
-        this.form.appId = ''
-        this.form.description = ''
-        this.form.appName = ''
-        this.form.appTableName = ''
-        this.form.count = 100
-      },
-
-      onAppChange (e) {
-        const value = this.appList.filter(v => v.id === e)[0]
-        this.form.appTableName = value.appTableName
-        this.form.appName = value.appName
-        this.form.statisticsConfigs = [{
-          alias: '',
-          calcType: '',
-          dictCode: '',
-          fieldCnName: '',
-          fieldName: ''
-        }]
-        this.form.orderConfigs = [{
-          alias: '',
-          calcType: '',
-          dictCode: '',
-          fieldCnName: '',
-          fieldName: ''
-        }]
-        this.form.groupConfigs = [{
-          alias: '',
-          calcType: '',
-          dictCode: '',
-          fieldCnName: '',
-          fieldName: ''
-        }]
-        this.filedList = value.fields.map(v => {
-          return {
-            ...v,
-            value: ''
-          }
-        })
-      },
-
-      onConfirm () {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            let configs = []
-
-            if (this.filedList.length) {
-              this.filedList.forEach(item => {
-                if (item.value.length) {
-                  item.value.forEach(v => {
-                    configs.push({
-                      alias: item.fieldCnName,
-                      calcType: v,
-                      fieldCnName: item.fieldCnName,
-                      fieldName: item.fieldName,
-                      dictCode: item.dictCode,
-                      orderType: this.orderType
-                    })
-                  })
-                }
-              })
-            }
-
-            this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateDatasource`, {
-              ...this.form,
-              configs,
-              id: this.id ? this.id : '',
-              dataRange: this.form.dataRange === '0' ? 0 : this.form.count
-            }).then(res => {
-              if (res.code === 0) {
-                this.$message.success(this.id ? '编辑成功' : '添加成功')
-                this.search.current = 1
-                this.isShow = false
-
-                this.getList()
-              }
-            })
-          }
-        })
-      },
-
-      cancel (isRefresh) {
-        this.$emit('change', {
-          type: 'list',
-          isRefresh: !!isRefresh
-        })
-      }
+    cancel() {
+      this.$router.push({})
     }
   }
+}
 </script>
 
 <style scoped lang="scss">
-  .form-flex {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
+.form-flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>
diff --git a/packages/bigscreen/designer/components/preview.vue b/packages/bigscreen/designer/components/preview.vue
new file mode 100644
index 00000000..83547203
--- /dev/null
+++ b/packages/bigscreen/designer/components/preview.vue
@@ -0,0 +1,58 @@
+<template>
+  <section class="preview">
+    <ai-dv-wrapper :views="[{label: '返回'}]" :theme="config.theme" @change="$router.back()" v-if="screenId" :title="info.name">
+      <ai-dv-background
+          :theme="config.theme"
+          v-if="config.length || config.theme === '1'"
+          :src="config.theme === '1' ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj-bg.png' : config.backgroundImage[0].url">
+      </ai-dv-background>
+      <app-gigscreen-viewer :urlPrefix="urlPrefix" :instance="instance" :dict="dict" :id="screenId"/>
+    </ai-dv-wrapper>
+  </section>
+</template>
+
+<script>
+import AppGigscreenViewer from "../../viewer/AppGigscreenViewer";
+
+export default {
+  name: "preview",
+  components: {AppGigscreenViewer},
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    urlPrefix: {
+      type: String,
+      default: '/app'
+    }
+  },
+  computed: {
+    screenId: v => v.$route.query.id
+  },
+  data() {
+    return {
+      info: {},
+      config: {}
+    }
+  },
+  methods: {
+    getDvData() {
+      let {id} = this.$route.query
+      this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
+        if (res?.data) {
+          this.info = res.data
+          this.config = JSON.parse(res.data.config).dashboard
+        }
+      })
+    }
+  },
+  created() {
+    this.getDvData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.preview {
+}
+</style>