feat: 仪表板编辑

frontend/src/utils/bus.js

+import Vue from 'vue'
+const bus = new Vue()
+export default bus

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

@@ -2,15 +2,15 @@
   <el-row class="panel-design-show">
     <div class="container" :style="panelDetails.gridStyle">
       <vue-drag-resize-rotate
-        v-for="panelDesign in panelDetails.panelDesigns"
-        v-show="panelDesign.keepFlag"
-        :key="panelDesign.id"
-        :panel-design="panelDesign"
+        v-for="item in panelDetails.panelDesigns"
+        v-show="item.keepFlag"
+        :key="item.id"
+        :panel-design="item"
         :parent="true"
         @newStyle="newStyle"
       >
         <!--视图显示 panelDesign.componentType==='view'-->
-        <chart-component v-if="panelDesign.componentType==='view'" :ref="panelDesign.id" :chart-id="panelDesign.id" :chart="panelDesign.chartView" />
+        <chart-component v-if="item.componentType==='view'" :ref="item.id" :chart-id="item.id" :chart="item.chartView" />
 
         <!--组件显示（待开发）-->
 
@@ -24,9 +24,9 @@ import { post, get } from '@/api/panel/panel'
 import ChartComponent from '@/views/chart/components/ChartComponent'
 import VueDragResizeRotate from '@/components/vue-drag-resize-rotate'
 import { uuid } from 'vue-uuid'
-
+import bus from '@/utils/bus'
 export default {
-  name: 'PanelViewShow',
+  name: 'DrawingBoard',
   components: { ChartComponent, VueDragResizeRotate },
   data() {
     return {
@@ -56,17 +56,27 @@ export default {
       this.panelDesign(newVal.id)
     }
   },
-  created() {
-    // this.get(this.$store.state.chart.viewId);
-  },
+
   mounted() {
     const panelId = this.$store.state.panel.panelInfo.id
     if (panelId) {
       this.panelDesign(panelId)
     }
+
+    bus.$on('panel-drawing-load', (panelId) => {
+      panelId && this.panelDesign(panelId)
+    })
+    bus.$on('panel-view-add', (view) => {
+      view && this.panelViewAdd(view)
+    })
+    bus.$on('panel-drawing-save', () => {
+      this.savePanel()
+    })
+    bus.$on('panel-drawing-preview', () => {
+      this.preViewShow()
+    })
   },
-  activated() {
-  },
+
   methods: {
     // 加载公共组件
 
@@ -97,20 +107,12 @@ export default {
         }
       })
     },
-    // removeView(panelDesignId) {
-    //   this.panelDetails.panelDesigns.forEach(function(panelDesign, index) {
-    //     if (panelDesign.id === panelDesignId) {
-    //       panelDesign.keepFlag = false
-    //     }
-    //   })
-    // },
+
     newStyle(viewId, newStyleInfo) {
       this.$nextTick(() => {
         this.$refs[viewId][0].chartResize()
       })
       this.panelInfo.preStyle = JSON.stringify(newStyleInfo)
-      console.log(viewId)
-      console.log(JSON.stringify(newStyleInfo))
     },
 
     // 左边往右边拖动时的事件

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

@@ -33,6 +33,7 @@
 <script>
 import { tree } from '@/api/panel/view'
 import { addClass, removeClass } from '@/utils'
+import bus from '@/utils/bus'
 export default {
   name: 'ViewSelect',
   data() {
@@ -81,7 +82,7 @@ export default {
     },
     renderNode(h, { node, data, store }) {
       return (
-        <div class='custom-tree-node' on-click={() => this.detail(data)} >
+        <div class='custom-tree-node' on-click={() => this.detail(data)} on-dblclick={() => this.addView2Drawing(data.id)} >
           <span class='label-span'>{node.label}</span>
           {data.type !== 'group' && data.type !== 'scene' ? (
 
@@ -99,6 +100,14 @@ export default {
     closeDetail() {
       this.showdetail = false
       this.detailItem = null
+    },
+    addView2Drawing(viewId) {
+    //   viewInfo(viewId).then(res => {
+    //     const info = res.data
+    //     this.$emit('panel-view-add', info)
+    //   })
+      bus.$emit('panel-view-add', { id: viewId })
+    //   this.$emit('panel-view-add', viewId)
     }
   }
 }

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

@@ -18,6 +18,10 @@
             <el-button class="el-icon-full-screen" size="mini" circle />
           </el-tooltip>
 
+          <el-tooltip content="保存">
+            <el-button class="el-icon-circle-check" size="mini" circle @click="saveDrawing" />
+          </el-tooltip>
+
           <el-tooltip content="预览">
             <el-button class="el-icon-view" size="mini" circle @click="save" />
           </el-tooltip>
@@ -95,6 +99,7 @@ import { addClass, removeClass } from '@/utils'
 import FilterGroup from '../filter'
 import ViewSelect from '../ViewSelect'
 import DrawingBoard from '../DrawingBoard'
+import bus from '@/utils/bus'
 export default {
   components: {
     DeMainContainer,
@@ -160,6 +165,9 @@ export default {
         const body = document.querySelector('body')
         body.insertBefore(elx, body.firstChild)
       })
+    },
+    saveDrawing() {
+      bus.$emit('panel-drawing-save')
     }
 
   }

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

@@ -495,6 +495,7 @@ export default {
       this.authVisible = false
     },
     edit(data) {
+      this.$store.dispatch('panel/setPanelInfo', data)
       this.$router.replace('/panelEdit')
     }
   }

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

@@ -12,21 +12,22 @@
           </span>
           <span style="float: right;line-height: 40px;">
 
-            <el-tooltip content="返回目录">
-              <el-button class="el-icon-refresh-left" size="mini" circle />
-            </el-tooltip>
-
             <el-tooltip content="背景图">
               <el-button class="el-icon-full-screen" size="mini" circle />
             </el-tooltip>
 
+            <!-- <el-tooltip content="保存">
+              <el-button class="el-icon-success" size="mini" circle @click="savePanel" />
+            </el-tooltip> -->
+
             <el-tooltip content="预览">
-              <el-button class="el-icon-view" size="mini" circle @click="save" />
+              <el-button class="el-icon-view" size="mini" circle @click="preViewShow" />
             </el-tooltip>
 
           </span>
         </el-row>
-        <el-row class="panel-design-show">
+        <drawing-board />
+        <!-- <el-row class="panel-design-show">
           <div class="container" :style="panelDetails.gridStyle">
             <vue-drag-resize-rotate
               v-for="panelDesign in panelDetails.panelDesigns"
@@ -36,43 +37,26 @@
               :parent="true"
               @newStyle="newStyle"
             >
-              <!--视图显示 panelDesign.componentType==='view'-->
               <chart-component v-if="panelDesign.componentType==='view'" :ref="panelDesign.id" :chart-id="panelDesign.id" :chart="panelDesign.chartView" />
 
-              <!--组件显示（待开发）-->
-
             </vue-drag-resize-rotate>
           </div>
 
-        </el-row></el-col>
+        </el-row> -->
+      </el-col>
     </el-row>
   </el-row>
 </template>
 <script>
-import { post, get } from '@/api/panel/panel'
-import ChartComponent from '../../chart/components/ChartComponent'
-import VueDragResizeRotate from '@/components/vue-drag-resize-rotate'
-import { uuid } from 'vue-uuid'
+import DrawingBoard from '../DrawingBoard'
+import bus from '@/utils/bus'
 
 export default {
   name: 'PanelViewShow',
-  components: { ChartComponent, VueDragResizeRotate },
+  components: { DrawingBoard },
   data() {
     return {
-      panelDetails: {
-        viewsUsable: [],
-        panelDesigns: [],
-        gridStyle: null
-      },
-      gridStyleDefault: {
-        position: 'relative',
-        height: '100%',
-        width: '100%',
-        backgroundColor: '#f2f2f2',
-        // background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)',
-        backgroundSize: '20px 20px, 20px 20px'
-      },
-      ViewActiveName: 'Views'
+
     }
   },
   computed: {
@@ -80,97 +64,13 @@ export default {
       return this.$store.state.panel.panelInfo
     }
   },
-  watch: {
-    panelInfo(newVal, oldVal) {
-      this.panelDesign(newVal.id)
-    }
-  },
-  created() {
-    // this.get(this.$store.state.chart.viewId);
-  },
-  mounted() {
-    const panelId = this.$store.state.panel.panelInfo.id
-    if (panelId) {
-      this.panelDesign(panelId)
-    }
-  },
-  activated() {
-  },
   methods: {
-    // 加载公共组件
 
-    // 加载panel design
-    panelDesign(panelId) {
-      get('panel/group/findOne/' + panelId).then(res => {
-        const panelDetailsInfo = res.data
-        if (panelDetailsInfo) {
-          this.panelDetails = panelDetailsInfo
-        }
-        if (!panelDetailsInfo.gridStyle) {
-          this.panelDetails.gridStyle = this.gridStyleDefault
-        }
-      })
-    },
-    panelViewAdd(view) {
-      const panelDesigns = this.panelDetails.panelDesigns
-      this.panelDetails.viewsUsable.forEach(function(item, index) {
-        if (item.id === view.id) {
-          const newComponent = {
-            id: uuid.v1(),
-            keepFlag: true,
-            chartView: item,
-            componentType: 'view',
-            styleInit: false
-          }
-          panelDesigns.push(newComponent)
-        }
-      })
-    },
-    // removeView(panelDesignId) {
-    //   this.panelDetails.panelDesigns.forEach(function(panelDesign, index) {
-    //     if (panelDesign.id === panelDesignId) {
-    //       panelDesign.keepFlag = false
-    //     }
-    //   })
-    // },
-    newStyle(viewId, newStyleInfo) {
-      this.$nextTick(() => {
-        this.$refs[viewId][0].chartResize()
-      })
-      this.panelInfo.preStyle = JSON.stringify(newStyleInfo)
-      console.log(viewId)
-      console.log(JSON.stringify(newStyleInfo))
-    },
-
-    // 左边往右边拖动时的事件
-    start1(e) {
-      console.log(e)
-    },
-    end1(e) {
-      console.log(e)
-    },
-    // 右边往左边拖动时的事件
-    start2(e) {
-      console.log(e)
-    },
-    end2(e) {
-      console.log(e)
-    },
-    // move回调方法
-    onMove(e, originalEvent) {
-      console.log(e)
-      return true
-    },
     preViewShow() {
-
+      bus.$emit('panel-drawing-preview')
     },
     savePanel() {
-      post('panel/group/saveGroupWithDesign', this.panelDetails, () => {
-      })
-      this.$success(this.$t('commons.save_success'))
-    },
-    save() {
-
+      bus.$emit('panel-drawing-save')
     }
   }
 }