大屏应用位置整合

packages/bigscreen/designer/AppDesigner.vue

@@ -1,34 +1,19 @@
 <template>
-  <ai-list v-if="!isShowDetail">
+  <section class="AppDesigner">
-    <template slot="title">
+    <component :is="currentPage" v-bind="$props"/>
-      <ai-title title="大屏列表" :isShowBottomBorder="false" :instance="instance"></ai-title>
+  </section>
-    </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>
 </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: {Preview, List, Add, SourceData},
-  components: {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: ''}

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 :title="id ? '编辑项目' : '添加项目'" isShowBack isShowBottomBorder @onBackClick="cancel"/>
-      </ai-title>
     </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.getInfo()
-      this.id = this.params.id
-      this.getInfo(this.params.id)
-    }
   },
 
-  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 => {
+      this.$router.push({query: {id}, hash: "#preview"})
-        if (res.data) {
-          this.config = JSON.parse(res.data.config).dashboard
-        }
-      })
-      this.screenId = id
     },
-
     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) {
+    cancel() {
-      this.$emit('change', {
+      this.$router.push({})
-        type: 'list',
-        isRefresh: !!isRefresh
-      })
     },
 
     handleCustomizedDV() {

packages/bigscreen/designer/components/List.vue

@@ -1,5 +1,6 @@
 <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>
@@ -155,24 +156,12 @@
         this.loading = false
       })
     },
-
     toEdit(id) {
-        this.$emit('change', {
+      this.$router.push({hash: "#add", query: {id}})
-          type: 'add',
-          params: {
-            id: id || ''
-          }
-        })
     },
-
     toAddData() {
-        this.$emit('change', {
+      this.$router.push({hash: "#sourceData"})
-          type: 'SourceData'
-        })
     }
   }
 }
 </script>
-
-<style scoped lang="scss">
-</style>

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">
@@ -64,7 +64,8 @@
                 <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"
@@ -73,7 +74,8 @@
                   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"
@@ -83,13 +85,15 @@
                 </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="请输入数据条数"
@@ -100,7 +104,8 @@
               <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"
@@ -438,11 +443,8 @@
       })
     },
 
-      cancel (isRefresh) {
+    cancel() {
-        this.$emit('change', {
+      this.$router.push({})
-          type: 'list',
-          isRefresh: !!isRefresh
-        })
     }
   }
 }

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>