设计页面驻留调整

packages/bigscreen/designer/AppDesigner.vue

@@ -9,11 +9,12 @@ import List from './components/List.vue'
 import Add from './components/Add'
 import SourceData from './components/SourceData'
 import Preview from "./components/preview";
+import DesignDashboard from "./components/Layout";
 
 export default {
   name: 'AppDesigner',
   label: '大屏设计',
-  components: {Preview, List, Add, SourceData},
+  components: {DesignDashboard, Preview, List, Add, SourceData},
   props: {
     instance: Function,
     dict: Object,
@@ -29,7 +30,8 @@ export default {
       const {hash} = this.$route
       return hash == "#sourceData" ? SourceData :
           hash == "#add" ? Add :
-              hash == "#preview" ? Preview : List
+              hash == "#preview" ? Preview :
+                  hash == "#design" ? DesignDashboard : List
     },
     tabs() {
       return [

packages/bigscreen/designer/components/Add.vue

@@ -27,7 +27,7 @@
         </ai-card>
         <ai-card title="大屏">
           <template #right>
-            <el-button @click="add('')" type="primary">添加大屏</el-button>
+            <el-button @click="gotoDesign()" type="primary">添加大屏</el-button>
             <el-button @click="dialog=true" type="primary">定制大屏</el-button>
           </template>
           <template #content>
@@ -62,16 +62,6 @@
           </template>
         </ai-card>
       </el-form>
-      <Layout
-          v-if="isShowLayout"
-          :instance="instance"
-          :dict="dict"
-          :params="query"
-          @change="onChange"
-          :urlPrefix="urlPrefix"
-          :theme="config.theme"
-          @close="isShowLayout = false">
-      </Layout>
       <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">
@@ -110,7 +100,6 @@ export default {
   components: {
     Layout
   },
-
   data() {
     return {
       info: {},
@@ -130,7 +119,6 @@ export default {
         {prop: 'id', label: 'ID'}
       ],
       tableData: [],
-      isShowLayout: false,
       id: '',
       dialog: false,
       custom: {},
@@ -143,36 +131,32 @@ export default {
       }
     }
   },
-
   created() {
     this.dict.load('customizedDVs')
-    this.getInfo()
+    this.getInfo().then(() => this.$route.params?.id && this.onChange(this.$route.params))
   },
-
-
-    methods: {
-      getInfo() {
-        let {id} = this.$route.query
-        if (!id) return
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenProjectDetailById?id=${id}`).then(res => {
-          if (res?.data) {
-            this.form = {
-              ...res.data
-            }
-            if (res.data.relationLsIds) {
-              this.tableData = res.data.lsList.map(v => {
-                let conf = JSON.parse(v.config || '') || {}
-                return {
-                  id: v.id,
-                  title: v.title,
-                  dv: conf.custom || '',
-                  meta: JSON.stringify(conf.meta),
-                  isCustom: !!conf.custom,
-                  status: v.status
-                }
-              })
-              this.total = res.data.lsList.length
-
+  methods: {
+    getInfo() {
+      let {id} = this.$route.query
+      if (!id) return Promise.reject()
+      return this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenProjectDetailById?id=${id}`).then(res => {
+        if (res?.data) {
+          this.form = {
+            ...res.data
+          }
+          if (res.data.relationLsIds) {
+            this.tableData = res.data.lsList.map(v => {
+              let conf = JSON.parse(v.config || '') || {}
+              return {
+                id: v.id,
+                title: v.title,
+                dv: conf.custom || '',
+                meta: JSON.stringify(conf.meta),
+                isCustom: !!conf.custom,
+                status: v.status
+              }
+            })
+            this.total = res.data.lsList.length
             this.$nextTick(() => {
               this.rowDrop()
             })
@@ -180,15 +164,13 @@ export default {
         }
       })
     },
-
-      onStatusChange (id) {
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/enableLargeScreen?id=${id}`).then(res => {
-          if (res.code === 0) {
-            this.$message.success('操作成功')
-          }
-        })
-      },
-
+    onStatusChange(id) {
+      this.instance.post(`${this.urlPrefix}/appdiylargescreen/enableLargeScreen?id=${id}`).then(res => {
+        if (res.code === 0) {
+          this.$message.success('操作成功')
+        }
+      })
+    },
     rowDrop() {
       const tbody = document.querySelector('.el-table__body-wrapper tbody')
       const _this = this
@@ -199,61 +181,46 @@ export default {
         }
       })
     },
-
-      toViewer(id) {
-        this.$router.push({query: {id}, hash: "#preview"})
-      },
-      onChange(e) {
-        const ids = this.tableData.map(v => v.id)
-        if (ids.indexOf(e.id) < 0) {
-          this.tableData.push({
-            title: e.title,
-            id: e.id,
-            status: '1'
-          })
-        } else {
-          const index = this.tableData.findIndex(v => v.id === e.id)
-          this.$set(this.tableData[index], 'title', e.title)
-        }
-
-        this.$nextTick(() => {
-          if (this.$route.query.id) {
-            const ids = this.tableData.map(v => v.id).join(',')
-            const names = this.tableData.map(v => v.name).join(',')
-            this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreenProject`, {
-              ...this.form,
-              relationLsIds: ids,
-              relationLsNames: names
-            }).then(res => {
-              if (res.code == 0) {
-              }
-            })
-          }
-        })
-      },
-
-    add() {
-      this.query = {
-        id: '',
-        name: this.form.name
-      }
-      this.isShowLayout = true
+    toViewer(id) {
+      this.$router.push({query: {id}, hash: "#preview"})
+    },
+    onChange(e) {
+      const ids = this.tableData.map(v => v.id)
+      if (ids.indexOf(e.id) < 0) {
+        this.tableData.push({
+          title: e.title,
+          id: e.id,
+          status: '1'
+        })
+      } else {
+        const index = this.tableData.findIndex(v => v.id === e.id)
+        this.$set(this.tableData[index], 'title', e.title)
+      }
+      this.$nextTick(() => {
+        if (this.$route.query.id) {
+          const ids = this.tableData.map(v => v.id).join(',')
+          const names = this.tableData.map(v => v.name).join(',')
+          this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreenProject`, {
+            ...this.form,
+            relationLsIds: ids,
+            relationLsNames: names
+          }).then(res => {
+            if (res.code == 0) {
+            }
+          })
+        }
+      })
+    },
+    gotoDesign(did) {
+      const {id} = this.$route.query
+      this.$router.push({hash: "#design", query: {id, did, name: this.form.name}})
     },
-
     toEdit(id, isCustom, form) {
       if (!isCustom) {
-        this.query = {
-          id,
-          name: this.form.name
-        }
-
-        this.isShowLayout = true
+        this.gotoDesign(id)
       } else {
         this.dialog = true
-        this.custom = {
-          ...form,
-
-        }
+        this.custom = form
       }
     },
 

packages/bigscreen/designer/components/Layout.vue

@@ -8,7 +8,7 @@
       </div>
       <div class="layout-header__right">
         <span type="text" @click="isShowImg = true">素材</span>
-        <span type="text" @click="back">退出</span>
+        <span type="text" @click="back()">退出</span>
         <span type="text" @click="save">保存</span>
       </div>
     </div>
@@ -60,7 +60,7 @@
                 width: bigscreenWidth + 'px',
                 height: bigscreenHeight + 'px'
               }">
-              <ai-dv-wrapper style="height: 100%" :title="params.name" :theme="dashboard.theme">
+              <ai-dv-wrapper style="height: 100%" :title="$route.query.name" :theme="dashboard.theme">
                 <div style="width: 100%; height: 100%">
                   <AiDvBackground
                       :theme="dashboard.theme"
@@ -91,7 +91,7 @@
                       <div class="coordinate-top"></div>
                       <div class="coordinate-label">{{ item.left }}, {{ item.top }}</div>
                     </div>
-                    <ai-dv-render :data="item" :theme="dashboard.theme" :index="index" :instance="instance" />
+                    <ai-dv-render :data="item" :theme="dashboard.theme" :index="index" :instance="instance"/>
                   </vue-draggable-resizable>
                 </div>
               </ai-dv-wrapper>
@@ -242,7 +242,6 @@
                 ref="dataConfig"
                 :instance="instance"
                 :dict="dict"
-                :urlPrefix="urlPrefix"
                 :options="currLayout"
                 @change="onChange('barChart')">
             </data-config>
@@ -355,13 +354,11 @@ import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
 import DataConfig from './form/DataConfig.vue'
 
 export default {
+  name: "designDashboard",
   props: {
     instance: Function,
     dict: Object,
-    params: Object,
-    urlPrefix: String
   },
-
   data() {
     return {
       colConfigs: [
@@ -440,9 +437,7 @@ export default {
   },
 
   mounted() {
-    if (this.params && this.params.id) {
-      this.getInfo(this.params.id)
-    }
+    this.getInfo(this.$route.query.did)
     this.$nextTick(() => {
       this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
       this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
@@ -451,15 +446,6 @@ export default {
   },
 
   methods: {
-    bindEvent() {
-      this.middleWidth = document.querySelector('.layout-wrapper').offsetWidth - 670
-      this.middleHeight = document.querySelector('.layout-wrapper').offsetHeight
-
-      this.$nextTick(() => {
-        this.initCanvas()
-      })
-    },
-
     copy(link) {
       let oInput = document.createElement('input')
       oInput.value = link
@@ -506,7 +492,7 @@ export default {
     },
 
     getInfo(id) {
-      this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
+      id && this.instance.post(`/app/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
         if (res.code === 0) {
           const data = JSON.parse(res.data.config)
           this.componentList = data.config
@@ -516,29 +502,32 @@ export default {
       })
     },
 
-    back() {
-      this.$emit('close')
+    back(params) {
+      if (!!params) {
+        const {id} = this.$route.query
+        this.$router.push({hash: "#add", params, query: {id}})
+      } else {
+        this.$router.back()
+      }
     },
-
     save() {
-      this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreen`, {
+      const {did: id} = this.$route.query, {dashboard} = this
+      this.instance.post(`/app/appdiylargescreen/addOrUpdateLargeScreen`, {
+        id,
         config: JSON.stringify({
           config: this.componentList,
-          dashboard: this.dashboard,
+          dashboard,
           images: this.images
         }),
         status: 1,
-        title: this.dashboard.title,
-        id: this.params.id || ''
+        title: dashboard.title,
       }).then(res => {
-        if (res.code == 0) {
+        if (res?.code == 0) {
           this.$message.success('保存成功')
-          this.$emit('change', res.data)
-          this.back()
+          this.back(res.data)
         }
       })
     },
-
     clone(e) {
       this.componentList.push(this.deepClone(e))
     },
@@ -617,8 +606,8 @@ export default {
     },
 
     initCanvas() {
-      var widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
-      var heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight
+      let widthScale = (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth
+      let heightScale = (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight
       this.heightScale = Math.min(widthScale, heightScale)
     }
   }