feat:仪表盘预览

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

 <template>
-  <div v-if="show" class="bg">
-    <el-button class="close" @click="close">关闭</el-button>
+  <div class="bg">
     <div class="canvas-container">
       <div
         class="canvas"
@@ -57,33 +56,14 @@ export default {
 .bg {
     width: 100%;
     height: 100%;
-    top: 0;
-    left: 0;
-    position: fixed;
-    background: rgb(0, 0, 0, .5);
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: auto;
-    padding: 20px;
-
     .canvas-container {
-        width: calc(100% - 40px);
-        height: calc(100% - 120px);
+        width: 100%;
+        height: 100%;
         overflow: auto;
-
-        .canvas {
-            background: #fff;
+      .canvas {
             position: relative;
             margin: auto;
         }
     }
-
-    .close {
-        position: absolute;
-        right: 20px;
-        top: 100px;
-    }
 }
 </style>

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

@@ -34,7 +34,7 @@
     </div>
 
     <!-- 预览 -->
-    <Preview v-model="isShowPreview" @change="handlePreviewChange" />
+<!--    <Preview v-model="isShowPreview" @change="handlePreviewChange" />-->
   </div>
 </template>
 

frontend/src/components/canvas/custom-component/UserView.vue

 <template>
   <div class="rect-shape">
-    <chart-component :ref="element.propValue.id" class="chart-class" :chart-id="element.propValue.id" :chart="chart" />
+    <chart-component :ref="element.propValue.id" class="chart-class" :chart="chart" />
   </div>
 </template>
 
@@ -8,6 +8,7 @@
 
 import { post } from '@/api/panel/panel'
 import ChartComponent from '@/views/chart/components/ChartComponent.vue'
+
 export default {
   name: 'UserView',
   components: { ChartComponent },
@@ -22,12 +23,7 @@ export default {
     }
   },
   created() {
-    const id = this.element.propValue.viewId
-    debugger
-    this.$nextTick(() => {
-      // 获取eChar数据
-      this.getData(id)
-    })
+    this.getData(this.element.propValue.viewId)
   },
   mounted() {
 

frontend/src/views/chart/components/ChartComponent.vue

@@ -12,6 +12,7 @@ import { basePieOption } from '../chart/pie/pie'
 import { baseFunnelOption } from '../chart/funnel/funnel'
 import { baseRadarOption } from '../chart/radar/radar'
 import eventBus from '@/components/canvas/utils/eventBus'
+import { uuid } from 'vue-uuid'
 
 export default {
   name: 'ChartComponent',
@@ -19,15 +20,12 @@ export default {
     chart: {
       type: Object,
       required: true
-    },
-    chartId: {
-      type: String,
-      required: false
     }
   },
   data() {
     return {
-      myChart: {}
+      myChart: {},
+      chartId: uuid.v1()
     }
   },
   watch: {
@@ -41,8 +39,15 @@ export default {
   mounted() {
     // 基于准备好的dom，初始化echarts实例
     console.log('chartId:' + this.chartId)
-    this.myChart = this.$echarts.init(document.getElementById(this.chartId))
-    this.drawEcharts()
+    // 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表盘有重复id情况
+    new Promise((resolve) => { resolve() }).then(() => {
+      //	此dom为echarts图标展示dom
+      this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
+      if (!this.myChart) {
+        this.myChart = this.$echarts.init(document.getElementById(this.chartId))
+      }
+      this.drawEcharts()
+    })
 
     // 监听元素变动事件
     eventBus.$on('resizing', (componentId) => {

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

@@ -199,12 +199,6 @@ export default {
         body.insertBefore(elx, body.firstChild)
       })
     },
-    saveDrawing() {
-      bus.$emit('panel-drawing-save')
-    },
-    preViewShow() {
-      bus.$emit('panel-drawing-preview')
-    },
 
     // 画布
     restore() {
@@ -230,7 +224,6 @@ export default {
       e.stopPropagation()
       let component
       const newComponentId = uuid.v1()
-      console.log('handleDrop123')
       const componentInfo = JSON.parse(e.dataTransfer.getData('componentInfo'))
 
       // 用户视图设置 复制一个模板

frontend/src/views/panel/index.vue

@@ -21,7 +21,6 @@
     </de-aside-container>
 
     <de-main-container>
-      <!--<router-view/>-->
       <component :is="component" :param="param" />
     </de-main-container>
   </de-container>

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

@@ -123,10 +123,6 @@
         custom-class="de-dialog"
       >
         <grant-auth v-if="authVisible" :resource-id="authResourceId" @close-grant="closeGrant" />
-        <!-- <span slot="footer" class="dialog-footer">
-          <el-button @click="authVisible = false">取 消</el-button>
-          <el-button type="primary" @click="authVisible = false">确 定</el-button>
-        </span> -->
       </el-dialog>
 
       <el-dialog
@@ -147,6 +143,8 @@
 <script>
 import GrantAuth from '../GrantAuth'
 import LinkGenerate from '@/views/link/generate'
+import { uuid } from 'vue-uuid'
+import bus from '@/utils/bus'
 import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, defaultTree, get } from '@/api/panel/panel'
 
 export default {
@@ -236,7 +234,6 @@ export default {
           this.groupForm = JSON.parse(JSON.stringify(param.data))
           break
         case 'move':
-
           break
         case 'delete':
           this.delete(param.data)
@@ -421,7 +418,15 @@ export default {
     nodeClick(data, node) {
       if (data.nodeType === 'panel') {
         this.currGroup = data
-        // this.$store.dispatch('panel/setPanelInfo', data)
+        // 加载视图数据
+        this.$nextTick(() => {
+          localStorage.setItem('canvasData', null)
+          localStorage.setItem('canvasStyle', null)
+          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))
+          })
+        })
       }
       if (node.expanded) {
         this.expandedArray.push(data.id)
@@ -523,6 +528,13 @@ export default {
     removeLink() {
       this.linkVisible = false
       this.linkResourceId = null
+    },
+    resetID(data) {
+      data.forEach(item => {
+        item.id = uuid.v1()
+      })
+
+      return data
     }
   }
 }

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

@@ -10,18 +10,19 @@
           </span>
           <span style="float: right;line-height: 40px;">
             <el-tooltip content="预览">
-              <el-button class="el-icon-view" size="mini" circle @click="preViewShow" />
+              <el-button class="el-icon-view" size="mini" circle />
             </el-tooltip>
           </span>
         </el-row>
         <!--TODO 仪表盘预览区域-->
-<!--        <Preview />-->
+        <section>
+          <Preview />
+        </section>
       </el-col>
     </el-row>
   </el-row>
 </template>
 <script>
-import bus from '@/utils/bus'
 import Preview from '@/components/canvas/components/Editor/Preview'
 
 export default {
@@ -36,15 +37,12 @@ export default {
     panelInfo() {
       return this.$store.state.panel.panelInfo
     }
+  },
+  mounted() {
+
   },
   methods: {
 
-    preViewShow() {
-      bus.$emit('panel-drawing-preview')
-    },
-    savePanel() {
-      bus.$emit('panel-drawing-save')
-    }
   }
 }
 </script>