修改场景跳转

ruoyi-ui/src/components/BoardTopNav/index.vue

@@ -17,7 +17,7 @@
             <div class="topNavScroll"
                  style="max-height: 300px;overflow: auto;background-color: #053563;padding: 0;border: none;">
               <el-dropdown-item v-for="i in selectSecnesList" :key="i.sceneId"
-                                :command="{router:i.router,name:i.sceneName,sceneId:i.sceneId}">
+                                :command="{router:i.router,name:i.sceneName,sceneId:i.sceneId,sceneModeId:i.sceneModeId,sceneField:i.sceneField}">
                 <span style="color: #f8fefd">
                   {{
                     i.sceneName
@@ -178,9 +178,14 @@ export default {
     },
     async dropdownLink(e,) {
       this.nowMenu = '2'
+      console.log(e)
+      if(e.sceneModeId === 100){
+        await this.$router.replace({path: "/board/sceneView" , query: {id: e.sceneField}});
+      }else{
         await this.$store.dispatch('app/setSceneId', e.sceneId)
         this.name = e.name
         await this.$router.replace({path: "/board/" + (e.router || 'smartScene'), query: {name: e.name}});
+      }
     },
     toIndex() {
       this.$router.replace({path: "/index"});

ruoyi-ui/src/router/index.js

@@ -32,6 +32,7 @@ import BoardIndex from '@/layout/boardIndex1.vue'
 
 // 公共路由
 export const constantRoutes = [
+  {path: '/sceneView', component: () => import('@/views/sceneView/index.vue')},
   {
     path: '/map',
     component: BoardIndex,

ruoyi-ui/src/views/sceneView/index.vue

@@ -3,7 +3,7 @@
     <div class="bindComponents" ref="container">
       <div ref="scene" class="scene"
            :style="`width:${pageData.width?( pageData.width -1 +'px'):'100%'};height:${pageData.height?( pageData.height - 1+'px'):'100%'};background-image:url(${pageCfg.bg})`">
-        <component :is="sceneData.center" :viewFlag="true"
+        <component :is="sceneData.center" :viewFlag="true" :styleData="pageCfg.styleData"
                    :tree="sceneData.centerChildren"></component>
       </div>
     </div>
@@ -65,7 +65,12 @@ export default {
           }
         }
       }
-      console.log(this.pageData)
+      if (pageCfg.sizeType === 3) {
+        this.pageData = {
+          width: null,
+          height: null,
+        }
+      }
     })
   },
   methods: {}

ruoyi-ui/src/views/system/layoutEdit.vue

@@ -44,7 +44,7 @@
           label="操作"
           width="260">
           <template slot-scope="scope">
-            <el-button @click="viewDetails(scope.row)" type="text" size="small" style="padding: 0 4px">全屏查看
+            <el-button @click="viewDetails(scope.row)" type="text" size="small" style="padding: 0 4px">预览
             </el-button>
             <el-button @click="querySceneInfo(scope.row)" type="text" size="small" style="padding: 0 4px">修改模版
             </el-button>
@@ -85,7 +85,8 @@
             <div class="useModel" v-if="!sceneForm.achieveContent.center">
               <i class="el-icon-plus"></i>
             </div>
-            <div class="layout" ref="layout" v-if="sceneForm.achieveContent.center">
+            <div class="layout" ref="layout" v-if="sceneForm.achieveContent.center"
+                 :style="`background-image:url(${(sceneForm.achieveContent.pageCfg||{}).bg})`">
               <component style="pointer-events: none" :is="sceneForm.achieveContent.center"
                          :tree="sceneForm.achieveContent.centerChildren"></component>
             </div>
@@ -105,7 +106,8 @@
       width="700px">
 
       <div class="modelListItem" v-for="i in modelList" @click="useModel(i)">
-        <div class="modelListItemContent">
+        <div class="modelListItemContent"
+             :style="`background-image:url(${(JSON.parse(i.templateContent).pageCfg||{}).bg})`">
           <component style="pointer-events: none;" :is="JSON.parse(i.templateContent).center"
                      :tree="JSON.parse(i.templateContent).centerChildren"></component>
         </div>
@@ -169,6 +171,7 @@
           <el-radio-group v-model="pageCfg.sizeType">
             <el-radio :label="1">固定宽高</el-radio>
             <el-radio :label="2">固定比例</el-radio>
+            <el-radio :label="3">撑满容器</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="页面大小" label-width="120px" v-if="pageCfg.sizeType">
@@ -212,7 +215,8 @@
             closable
             :disable-transitions="false"
             @close="colorsClose(tag)">
-            <el-color-picker show-alpha v-model="colors[k]" size="mini" @change="colorsChange($event,k)"></el-color-picker>
+            <el-color-picker show-alpha v-model="colors[k]" size="mini"
+                             @change="colorsChange($event,k)"></el-color-picker>
           </el-tag>
           <el-color-picker show-alpha
                            class="input-new-tag"
@@ -231,7 +235,8 @@
             closable
             :disable-transitions="false"
             @close="colorsClose1(tag)">
-            <el-color-picker show-alpha v-model="colors1[k]" size="mini" @change="colorsChange1($event,k)"></el-color-picker>
+            <el-color-picker show-alpha v-model="colors1[k]" size="mini"
+                             @change="colorsChange1($event,k)"></el-color-picker>
           </el-tag>
           <el-color-picker show-alpha
                            class="input-new-tag"
@@ -453,6 +458,8 @@ export default {
         ...e,
         sceneData: JSON.parse(e.achieveContent)
       }
+      console.log('csssss', JSON.parse(e.achieveContent))
+      this.$nextTick(() => {
         this.pageCfg = this.bindComponentsData.sceneData.pageCfg || {}
         if (!this.pageCfg.styleData?.colors) {
           this.$set(this.pageCfg.styleData, 'colors', [])
@@ -463,7 +470,6 @@ export default {
         if (!this.pageCfg.styleData?.region) {
           this.$set(this.pageCfg.styleData, 'region', '')
         }
-      this.$nextTick(() => {
         this.colors = JSON.parse(JSON.stringify(this.pageCfg.styleData.colors || '[]'))
         this.colors1 = JSON.parse(JSON.stringify(this.pageCfg.styleData.colors1 || '[]'))
 
@@ -490,6 +496,12 @@ export default {
             }
           }
         }
+        if (this.pageCfg.sizeType === 3) {
+          this.pageData = {
+            width: null,
+            height: null,
+          }
+        }
       })
     },
     bindComponentsOk() {
@@ -533,6 +545,12 @@ export default {
           }
         }
       }
+      if (this.pageCfg.sizeType === 3) {
+        this.pageData = {
+          width: null,
+          height: null,
+        }
+      }
       this.bindComponentsData.sceneData.pageCfg = this.pageCfg
       this.pageCfgDialogVisible = false
     },
@@ -540,7 +558,7 @@ export default {
       this.$set(this.pageCfg, 'bg', file.data.url.replaceAll('127.0.0.1', '10.11.40.122'))
     },
     viewDetails(e) {
-      this.$router.push({path: '/board/sceneView', query: {achieveId: e.achieveId}})
+      this.$router.push({path: '/sceneView', query: {achieveId: e.achieveId}})
     }
   }
 }
@@ -580,6 +598,8 @@ export default {
 .layout {
   height: 500px;
   border: 1px solid #0003;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
 
 .miniLayout {
@@ -617,6 +637,8 @@ export default {
     height: 200px;
     border: 1px solid #0003;
     vertical-align: top;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
   }
 
   .modelListItemName {
@@ -638,12 +660,15 @@ export default {
   width: 100%;
   height: calc(100vh - 70px - 70px - 60px - 6px);
   position: relative;
+  overflow: auto;
 
   .scene {
     position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    left: 0%;
+    top: 0%;
+    //left: 50%;
+    //top: 50%;
+    //transform: translate(-50%, -50%);
     border: 1px solid #0003;
     background-repeat: no-repeat;
     background-size: 100% 100%;

ruoyi-ui/src/views/system/layoutModel.vue

@@ -74,10 +74,23 @@
           <el-input v-model="form.templateName"></el-input>
         </el-form-item>
         <el-form-item label="模型内容">
-          <div class="layout" ref="layout">
+          <div class="layout" ref="layout" :style="`background-image:url(${form.templateContent.pageCfg.bg})`">
             <component :is="form.templateContent.center" :tree="form.templateContent.centerChildren"></component>
           </div>
         </el-form-item>
+        <el-form-item label="背景" label-width="80px">
+          <el-upload
+            class="avatar-uploader"
+            action="dev-api/basic/hwTemplateAchieve/saveImage"
+            :headers="{
+            authorization:'Bearer ' + getToken()
+              }"
+            :show-file-list="false"
+            :on-success="getImg">
+            <img v-if="form.templateContent.pageCfg.bg" :src="form.templateContent.pageCfg.bg" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="addModelOk" v-if="dialogTitle1 === '新增模型'">新 增</el-button>
@@ -104,6 +117,7 @@
 import LeftRight from '../../components/setLayout/leftRightStr'
 import UpDown from '../../components/setLayout/upDownStr'
 import {addModel, delModel, queryModel, updateModel} from "@/api/configuration/layoutModel";
+import {getToken} from "@/utils/auth";
 
 export default {
   name: 'Layout',
@@ -122,12 +136,16 @@ export default {
         pageNum: 1,
         pageSize: 10,
       },
+      pageCfg: {},
       total: 0,
       form: {
         templateName: '',
         templateContent: {
           center: null,
-          centerChildren: {}
+          centerChildren: {},
+          pageCfg: {
+            bg: ''
+          }
         }
       },
       tableData: []
@@ -137,6 +155,12 @@ export default {
     this.queryModels()
   },
   methods: {
+    getToken() {
+      return getToken()
+    },
+    async getImg(file) {
+      this.$set(this.form.templateContent.pageCfg, 'bg', file.data.url)
+    },
     getList() {
       console.log(this.queryForm)
       this.load = true
@@ -160,7 +184,10 @@ export default {
         templateName: '',
         templateContent: {
           center: null,
-          centerChildren: {}
+          centerChildren: {},
+          pageCfg: {
+            bg: ''
+          }
         }
       }
       this.addModelDialog = true
@@ -248,6 +275,8 @@ export default {
 .layout {
   height: 500px;
   border: 1px solid #0003;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
 
 .miniLayout {
@@ -256,4 +285,33 @@ export default {
   border: 1px solid #0003;
   pointer-events: none
 }
+
+/deep/ .avatar-uploader {
+  .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .el-upload:hover {
+    border-color: #409EFF;
+  }
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
 </style>