feat:样式修改

frontend/src/components/canvas/components/Editor/PreviewEject.vue

@@ -135,5 +135,6 @@ export default {
     overflow: auto;
     position: relative;
     margin: 0;
+    background-color: #f7f8fa;
   }
 </style>

frontend/src/components/canvas/components/Editor/PreviewFullScreen.vue

 <template>
-  <div class="bg">
-    <div id="preview-parent" class="canvas-container">
-      <div
-        class="canvas"
-        :style="{
-          width: changeStyleWithScale(canvasStyleData.width) + 'px',
-          height: changeStyleWithScale(canvasStyleData.height) + 'px',
-        }"
-      >
-        <ComponentWrapper
-          v-for="(item, index) in componentData"
-          :key="index"
-          :config="item"
-        />
-      </div>
-    </div>
+  <div style="width: 100%;height: 100%;background-color: #f7f8fa">
+    <span style="line-height: 35px; position: absolute; top:10px;right: 20px;z-index:100000">
+      <el-button size="mini" @click="toDir">
+        关闭
+      </el-button>
+    </span>
+    <Preview />
   </div>
 </template>
 
 <script>
-import { getStyle } from '@/components/canvas/utils/style'
-import { mapState } from 'vuex'
-import ComponentWrapper from './ComponentWrapper'
-import { changeStyleWithScale } from '@/components/canvas/utils/translate'
-import { uuid } from 'vue-uuid'
 
-export default {
-  components: { ComponentWrapper },
-  model: {
-    prop: 'show',
-    event: 'change'
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: mapState([
-    'componentData',
-    'canvasStyleData'
-  ]),
-  mounted() {
-    // 计算组件当前合适宽度
-  },
-  created() {
-    this.restore()
-  },
-  methods: {
-    changeStyleWithScale,
-
-    getStyle,
-
-    close() {
-      this.$emit('change', false)
-    },
-    restore() {
-      // 用保存的数据恢复画布
-      if (localStorage.getItem('canvasData')) {
-        this.$store.commit('setComponentData', this.resetID(JSON.parse(localStorage.getItem('canvasData'))))
-      }
+import Preview from './Preview'
+import bus from '@/utils/bus'
 
-      if (localStorage.getItem('canvasStyle')) {
-        this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
-      }
-    },
-    resetID(data) {
-      data.forEach(item => {
-        item.id = uuid.v1()
-      })
+export default {
+  components: { Preview },
 
-      return data
+  methods: {
+    toDir() {
+      debugger
+      this.$router.replace('/panel/index')
+      bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
-.bg {
-    width: 100%;
-    height: 100%;
-    .canvas-container {
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-      .canvas {
-            position: relative;
-            margin: auto;
-        }
-    }
-}
-</style>

frontend/src/components/canvas/components/Toolbar.vue

@@ -216,8 +216,8 @@ export default {
     },
 
     clickPreview() {
-      const url = '#/preview'
-      window.open(url, '_blank')
+      // 编辑时临时保存 当前修改的画布
+      this.$router.replace('/PreviewFullScreen')
     }
   }
 }

frontend/src/router/index.js

@@ -77,6 +77,12 @@ export const constantRoutes = [
     hidden: true
   },
 
+  {
+    path: '/previewFullScreen',
+    component: () => import('@/components/canvas/components/Editor/PreviewFullScreen'),
+    hidden: true
+  },
+
   {
     path: '/',
     component: Layout,

frontend/src/views/panel/list/PanelList.vue

@@ -10,7 +10,7 @@
             :data="defaultData"
             node-key="id"
             :expand-on-click-node="true"
-            @node-click="panelDefaultClick"
+            @node-click="nodeClick"
           >
             <span slot-scope="{ data }" class="custom-tree-node">
               <span>
@@ -419,14 +419,12 @@ export default {
     nodeClick(data, node) {
       if (data.nodeType === 'panel') {
         // 加载视图数据
-        this.$nextTick(() => {
-          get('panel/group/findOne/' + data.id).then(response => {
-            this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
-            this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle))
-            this.$store.dispatch('panel/setPanelInfo', data)
-            this.currGroup = data
-            eventBus.$emit('componentDataChange', '')
-          })
+        get('panel/group/findOne/' + data.id).then(response => {
+          this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
+          this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle))
+          this.$store.dispatch('panel/setPanelInfo', data)
+          this.currGroup = data
+          eventBus.$emit('componentDataChange', '')
         })
       }
       if (node.expanded) {

frontend/src/views/panel/list/PanelViewShow.vue

 <template>
-  <el-row style="height: 100%;width: 100%;">
+  <el-row v-if="showMain" style="height: 100%;width: 100%;">
     <el-col v-if="panelInfo.name.length>0" class="panel-design">
       <el-row class="panel-design-head">
         <!--TODO 仪表盘头部区域-->
@@ -25,12 +25,14 @@
 <script>
 import Preview from '@/components/canvas/components/Editor/Preview'
 import { mapState } from 'vuex'
+import eventBus from '@/components/canvas/utils/eventBus'
 
 export default {
   name: 'PanelViewShow',
   components: { Preview },
   data() {
     return {
+      showMain: false
 
     }
   },
@@ -44,7 +46,14 @@ export default {
     ])
   },
   mounted() {
-
+    // 监听数据变动事件 刷新清楚历史样式
+    eventBus.$on('componentDataChange', () => {
+      // 刷新
+      this.showMain = false
+      this.$nextTick(() => {
+        this.showMain = true
+      })
+    })
   },
   methods: {
     clickPreview() {

frontend/src/views/panel/preview/index.vue

 <template>
   <el-container>
     <!-- <de-header>Header</de-header> -->
-    <el-header class="de-header">
-      <el-row class="panel-design-head">
-        <span style="float: left;line-height: 35px; color: gray">
-
-          <span>名称：测试仪表板</span>
-
-        </span>
-        <span style="float: right;line-height: 35px;">
-
-          <el-tooltip content="返回目录">
-            <el-button class="el-icon-refresh-left" size="mini" circle @click="toDir" />
-          </el-tooltip>
-
-        </span>
-      </el-row>
-    </el-header>
+    <span style="line-height: 35px; position: absolute; top:10px;right: 10px">
+      <el-button size="mini" @click="toDir">
+        关闭
+      </el-button>
+    </span>
     <de-container>
 
       <de-main-container class="ms-main-container">
-<!--        <drawing-board :disabled="true" />-->
+        <!--        <drawing-board :disabled="true" />-->
+        this is test
       </de-main-container>
     </de-container>
   </el-container>