feat:画布增加视图编辑功能

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

@@ -23,6 +23,7 @@
 
 <script>
 import { mapState } from 'vuex'
+import bus from '@/utils/bus'
 
 export default {
   data() {
@@ -38,6 +39,12 @@ export default {
   ]),
   methods: {
     edit() {
+      debugger
+      if (this.curComponent.component === 'user-view') {
+        this.$store.dispatch('chart/setViewId', null)
+        this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
+        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit' })
+      }
       // 编辑组件
     },
     lock() {

frontend/src/views/chart/view/ChartEdit.vue

@@ -211,6 +211,8 @@ import DimensionItem from '../components/drag-item/DimensionItem'
 import QuotaItem from '../components/drag-item/QuotaItem'
 import FilterItem from '../components/drag-item/FilterItem'
 import ChartComponent from '../components/ChartComponent'
+import bus from '@/utils/bus'
+
 // shape attr,component style
 import {
   DEFAULT_COLOR_CASE,
@@ -355,6 +357,8 @@ export default {
       })
     },
     closeEdit() {
+      // 从仪表盘入口关闭
+      bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
       this.$emit('switchComponent', { name: '' })
     },
     getData(id) {

frontend/src/views/panel/index-back.vue

@@ -0,0 +1,85 @@
+<template>
+  <de-container>
+
+    <de-aside-container>
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane name="PanelList">
+          <span slot="label"><i class="el-icon-document" />列表</span>
+          <panel-list />
+        </el-tab-pane>
+        <el-tab-pane name="panels_star">
+          <span slot="label"><i class="el-icon-star-off" />收藏</span>
+          开发中...
+        </el-tab-pane>
+        <el-tab-pane name="panels_share" :lazy="true">
+          <span slot="label"><i class="el-icon-share" />分享</span>
+          <share-tree v-if="showShare" />
+        </el-tab-pane>
+
+      </el-tabs>
+
+    </de-aside-container>
+
+    <de-main-container>
+      <component :is="component" :param="param" />
+    </de-main-container>
+  </de-container>
+</template>
+
+<script>
+import DeMainContainer from '@/components/dataease/DeMainContainer'
+import DeContainer from '@/components/dataease/DeContainer'
+import DeAsideContainer from '@/components/dataease/DeAsideContainer'
+// import Group from './group/Group'
+import PanelList from './list/PanelList'
+import PanelViewShow from './list/PanelViewShow'
+import ShareTree from './GrantAuth/shareTree'
+
+export default {
+  name: 'Panel',
+  components: { DeMainContainer, DeContainer, DeAsideContainer, PanelList, PanelViewShow, ShareTree },
+  data() {
+    return {
+      component: PanelViewShow,
+      param: {},
+      activeName: 'PanelList',
+      showShare: false
+    }
+  },
+  methods: {
+    handleClick(tab, event) {
+      // 点击分析面板需要刷新分享内容
+      if (tab.name === 'panels_share') {
+        this.refreshShare()
+      }
+    },
+    // switchComponent(c) {
+    //   console.log(c)
+    //   this.param = c.param
+    //   switch (c.name) {
+    //     case 'PanelViewShow':
+    //       this.component = PanelViewShow
+    //       break
+    //   }
+    // },
+    refreshShare() {
+      this.showShare = false
+      this.$nextTick(() => (this.showShare = true))
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .ms-aside-container {
+    height: calc(100vh - 56px);
+    padding: 15px;
+    min-width: 260px;
+    max-width: 460px;
+  }
+
+  .ms-main-container {
+    height: calc(100vh - 56px);
+  }
+
+</style>