feat: 仪表板布局

frontend/src/router/index.js

@@ -59,6 +59,19 @@ export const constantRoutes = [
     hidden: true
   },
 
+  {
+    path: '/panelEdit',
+    component: Layout,
+    redirect: '/panelEdit/edit',
+    hidden: true,
+    children: [
+      {
+        path: 'edit',
+        component: () => import('@/views/panel/new/edit')
+      }
+    ]
+  },
+
   {
     path: '/',
     component: Layout,

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

+<template>
+  <el-container>
+    <!-- <de-header>Header</de-header> -->
+    <el-header class="de-header">Header</el-header>
+    <de-container>
+      <de-aside-container class="ms-aside-container">Aside</de-aside-container>
+      <de-main-container class="ms-main-container"> Main</de-main-container>
+    </de-container>
+  </el-container>
+</template>
+
+<script>
+import DeMainContainer from '@/components/dataease/DeMainContainer'
+import DeContainer from '@/components/dataease/DeContainer'
+import DeAsideContainer from '@/components/dataease/DeAsideContainer'
+
+export default {
+  components: {
+    DeMainContainer,
+    DeContainer,
+    DeAsideContainer
+  }
+}
+</script>
+
+<style scoped>
+  .ms-aside-container {
+    height: calc(100vh - 91px);
+    padding: 15px;
+    min-width: 260px;
+    max-width: 460px;
+    border: none;
+  }
+
+  .ms-main-container {
+    height: calc(100vh - 91px);
+  }
+
+  .de-header {
+    height: 35px !important;
+    border-bottom: 1px solid #E6E6E6;
+}
+
+</style>

frontend/src/views/panel/new/index1.vue

+<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>
+          <PanelList />
+        </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>
+      <!--<router-view/>-->
+      <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 './PanelList'
+import PanelView from '../list/PanelView'
+import PanelViewShow from './PanelViewShow'
+import ShareTree from '../GrantAuth/shareTree'
+
+export default {
+  name: 'Panel',
+  components: { DeMainContainer, DeContainer, DeAsideContainer, PanelList, PanelView, 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>