From 7d248904d335bb6a20719fcaa0c57758fa44ff7f Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Mon, 22 Mar 2021 19:05:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=90=88=E5=B9=B6=E4=BB=AA=E8=A1=A8?=
 =?UTF-8?q?=E6=9D=BF=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vue-drag-resize-rotate/index.vue          |   2 -
 frontend/src/router/index.js                  |   2 +-
 frontend/src/styles/index.scss                |  12 +
 .../src/views/panel/DrawingBoard/index.vue    | 253 ++++++++
 frontend/src/views/panel/edit/index.vue       | 229 ++++++++
 frontend/src/views/panel/filter/index.vue     |  57 ++
 frontend/src/views/panel/index.vue            |  27 +-
 frontend/src/views/panel/list/PanelList.vue   |   9 +
 .../src/views/panel/list/PanelViewShow.vue    |  69 +--
 frontend/src/views/panel/new/PanelList.vue    | 542 ------------------
 .../src/views/panel/new/PanelViewShow.vue     | 398 -------------
 frontend/src/views/panel/new/edit.vue         |  44 --
 frontend/src/views/panel/new/index1.vue       |  87 ---
 13 files changed, 596 insertions(+), 1135 deletions(-)
 create mode 100644 frontend/src/views/panel/DrawingBoard/index.vue
 create mode 100644 frontend/src/views/panel/edit/index.vue
 create mode 100644 frontend/src/views/panel/filter/index.vue
 delete mode 100644 frontend/src/views/panel/new/PanelList.vue
 delete mode 100644 frontend/src/views/panel/new/PanelViewShow.vue
 delete mode 100644 frontend/src/views/panel/new/edit.vue
 delete mode 100644 frontend/src/views/panel/new/index1.vue

diff --git a/frontend/src/components/vue-drag-resize-rotate/index.vue b/frontend/src/components/vue-drag-resize-rotate/index.vue
index 4a3d72feec..a6f1e1eedf 100644
--- a/frontend/src/components/vue-drag-resize-rotate/index.vue
+++ b/frontend/src/components/vue-drag-resize-rotate/index.vue
@@ -409,7 +409,6 @@ export default {
     },
     style() {
       if (!this.panelDesign.styleInit && this.panelDesign.componentPosition) {
-        debugger
         // 设置定位
         const componentPosition = JSON.parse(this.panelDesign.componentPosition)
         this.left = componentPosition.left
@@ -636,7 +635,6 @@ export default {
 
   methods: {
     removeView() {
-      debugger
       this.panelDesign.keepFlag = false
       // console.log(this.panelDesignId);
       // this.$emit('removeView', this.panelDesign.id)
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 58a535346c..51e798ecfa 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -67,7 +67,7 @@ export const constantRoutes = [
     children: [
       {
         path: 'edit',
-        component: () => import('@/views/panel/new/edit')
+        component: () => import('@/views/panel/edit')
       }
     ]
   },
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index eadcbd344f..0974d206e9 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -110,3 +110,15 @@ div:focus {
     }
 
 }
+
+.filter-card-class {
+    width: 100%;
+    .el-card__header {
+        padding: 5px 0 !important;
+        border-bottom: none !important;
+    }
+
+    .el-card__body {
+        padding: 10px;
+    }
+}
diff --git a/frontend/src/views/panel/DrawingBoard/index.vue b/frontend/src/views/panel/DrawingBoard/index.vue
new file mode 100644
index 0000000000..fc75575d13
--- /dev/null
+++ b/frontend/src/views/panel/DrawingBoard/index.vue
@@ -0,0 +1,253 @@
+<template>
+  <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"
+        :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>
+</template>
+<script>
+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'
+
+export default {
+  name: 'PanelViewShow',
+  components: { ChartComponent, VueDragResizeRotate },
+  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: {
+    panelInfo() {
+      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() {
+
+    },
+    savePanel() {
+      post('panel/group/saveGroupWithDesign', this.panelDetails, () => {
+      })
+      this.$success(this.$t('commons.save_success'))
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .view-list {
+    height: 100%;
+    width: 20%;
+    min-width: 180px;
+    max-width: 220px;
+    border: 1px solid #E6E6E6;
+    border-left: 0 solid;
+    overflow-y: auto;
+  }
+
+  .view-list-thumbnails-outline {
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .view-list-thumbnails {
+    width: 100%;
+    padding: 0px 15px 15px 0px;
+  }
+
+  .panel-design {
+    height: 100%;
+    min-width: 500px;
+    border-top: 1px solid #E6E6E6;
+  }
+
+  .panel-design-head {
+    height: 40px;
+  }
+
+  .panel-design-show {
+    height: 100%;
+    width: 100%;
+    border-top: 1px solid #E6E6E6;
+  }
+
+  .padding-lr {
+    padding: 0 6px;
+  }
+
+  .itxst {
+    margin: 10px;
+    text-align: left;
+  }
+
+  .col {
+    width: 40%;
+    flex: 1;
+    padding: 10px;
+    border: solid 1px #eee;
+    border-radius: 5px;
+    float: left;
+  }
+
+  .col + .col {
+    margin-left: 10px;
+  }
+
+  .item {
+    padding: 2px 12px;
+    margin: 3px 3px 0 3px;
+    border: solid 1px #eee;
+    background-color: #f1f1f1;
+    text-align: left;
+    display: block;
+  }
+
+  .item + .item {
+    border-top: none;
+    margin-top: 3px;
+  }
+
+  .item:hover {
+    background-color: #fdfdfd;
+    cursor: pointer;
+  }
+
+  .item-axis {
+    padding: 2px 12px;
+    margin: 3px 3px 0 3px;
+    border: solid 1px #eee;
+    background-color: #f1f1f1;
+    text-align: left;
+  }
+
+  .item-axis:hover {
+    background-color: #fdfdfd;
+    cursor: pointer;
+  }
+
+  .el-form-item {
+    margin-bottom: 0;
+  }
+
+  .container {
+    width: 100%;
+    height: 600px;
+    border: 1px solid #000;
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  span {
+    font-size: 12px;
+  }
+</style>
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
new file mode 100644
index 0000000000..4b1edac472
--- /dev/null
+++ b/frontend/src/views/panel/edit/index.vue
@@ -0,0 +1,229 @@
+<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>
+
+          <el-tooltip content="背景图">
+            <el-button class="el-icon-full-screen" size="mini" circle />
+          </el-tooltip>
+
+          <el-tooltip content="预览">
+            <el-button class="el-icon-view" size="mini" circle @click="save" />
+          </el-tooltip>
+
+        </span>
+      </el-row>
+    </el-header>
+    <de-container>
+      <de-aside-container class="ms-aside-container">
+        <div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
+
+          <div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto;">
+            <!-- 视图图表 -->
+            <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 32px auto 0px;font-size:150%;">
+              <el-button circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
+            </div>
+            <!-- 视图文字 -->
+            <div style="position: relative; margin: 18px auto 30px">
+              <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
+                视图
+              </div>
+            </div>
+            <!-- 视图分割线 -->
+            <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
+              <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
+            </div>
+            <!-- 过滤组件 -->
+            <div tabindex="-1" style="position: relative; margin: 20px auto">
+
+              <div style="height: 60px; position: relative">
+
+                <div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
+
+                  <!-- <i class="el-icon-s-tools" style="width: 24px; height: 24px;position: relative;flex-shrink: 0;font-size:150%;" /> -->
+                  <el-button circle class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
+
+                </div>
+                <div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
+
+                  <div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
+
+                    组件
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        <div ref="leftPanel" :class="{show:show}" class="leftPanel-container">
+          <div class="leftPanel-background" />
+          <div v-if="show" class="leftPanel">
+
+            <div class="leftPanel-items">
+              <filter-group />
+            </div>
+          </div>
+        </div>
+
+      </de-aside-container>
+      <de-main-container class="ms-main-container">
+        <drawing-board />
+      </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'
+import { addClass, removeClass } from '@/utils'
+import FilterGroup from '../filter'
+import DrawingBoard from '../DrawingBoard'
+export default {
+  components: {
+    DeMainContainer,
+    DeContainer,
+    DeAsideContainer,
+    FilterGroup,
+    DrawingBoard
+
+  },
+  data() {
+    return {
+      show: false,
+      clickNotClose: false
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    save() {
+
+    },
+    toDir() {
+      this.$router.replace('/panel/index')
+    },
+    showPanel(type) {
+      this.show = !this.show
+    },
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.button-div-class')
+      const self = evt.target.closest('.leftPanel')
+      if (!parent && !self) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      this.$nextTick(() => {
+        const elx = this.$refs.leftPanel
+        const body = document.querySelector('body')
+        body.insertBefore(elx, body.firstChild)
+      })
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+  .ms-aside-container {
+    height: calc(100vh - 91px);
+    padding: 15px;
+    min-width: 60px;
+    max-width: 60px;
+    border: none;
+  }
+
+  .ms-main-container {
+    height: calc(100vh - 91px);
+  }
+
+  .de-header {
+    height: 35px !important;
+    border-bottom: 1px solid #E6E6E6;
+  }
+
+  .showLeftPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style lang="scss" scoped>
+.leftPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.leftPanel {
+  width: 100%;
+  max-width: 260px;
+  height: calc(100vh - 91px);
+  position: fixed;
+  top: 91px;
+  left: 60px;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+
+  .leftPanel-background {
+    z-index: 20000;
+    opacity: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .leftPanel {
+    transform: translate(0);
+  }
+
+}
+
+</style>
diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue
new file mode 100644
index 0000000000..efda5802ed
--- /dev/null
+++ b/frontend/src/views/panel/filter/index.vue
@@ -0,0 +1,57 @@
+<template>
+
+  <div>
+    <el-card class="filter-card-class">
+      <div slot="header">
+        <span>卡片名称</span>
+      </div>
+      <div style="position: relative;margin-left: 5px;">
+        <div v-for="o in 4" :key="o" class="item">
+          <el-button style="width: 90px;" size="mini" type="primary" icon="el-icon-edit" plain> {{ '条件 ' + o }}</el-button>
+        </div>
+      </div>
+
+    </el-card>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: 'FilterGroup',
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .item {
+    font-size: 12px;
+    width: 100px;
+    height: 36px;
+    position: relative;
+    float: left;
+    margin-top: 10px;
+    margin-left: 10px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    width: 480px;
+  }
+</style>
diff --git a/frontend/src/views/panel/index.vue b/frontend/src/views/panel/index.vue
index be6628b2d8..00f9347f12 100644
--- a/frontend/src/views/panel/index.vue
+++ b/frontend/src/views/panel/index.vue
@@ -5,7 +5,7 @@
       <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane name="PanelList">
           <span slot="label"><i class="el-icon-document" />列表</span>
-          <PanelList @switchComponent="switchComponent" />
+          <PanelList />
         </el-tab-pane>
         <el-tab-pane name="panels_star">
           <span slot="label"><i class="el-icon-star-off" />收藏</span>
@@ -15,17 +15,14 @@
           <span slot="label"><i class="el-icon-share" />分享</span>
           <share-tree v-if="showShare" />
         </el-tab-pane>
-        <!--        <el-tab-pane name="example">-->
-        <!--          <span slot="label"><i class="el-icon-star-on"></i>示例</span>-->
-        <!--          <group @switchComponent="switchComponent"/>-->
-        <!--        </el-tab-pane>-->
+
       </el-tabs>
 
     </de-aside-container>
 
     <de-main-container>
       <!--<router-view/>-->
-      <component :is="component" :param="param" @switchComponent="switchComponent" />
+      <component :is="component" :param="param" />
     </de-main-container>
   </de-container>
 </template>
@@ -58,15 +55,15 @@ export default {
         this.refreshShare()
       }
     },
-    switchComponent(c) {
-      console.log(c)
-      this.param = c.param
-      switch (c.name) {
-        case 'PanelViewShow':
-          this.component = PanelViewShow
-          break
-      }
-    },
+    // 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))
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index e4d33e628d..011ac4ab0d 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -88,6 +88,9 @@
                       <el-dropdown-item v-if="data.nodeType==='panel'" icon="el-icon-share" :command="beforeClickMore('share',data,node)">
                         {{ $t('panel.share') }}
                       </el-dropdown-item>
+                      <el-dropdown-item v-if="data.nodeType==='panel'" icon="el-icon-edit" :command="beforeClickMore('edit',data,node)">
+                        {{ $t('panel.edit') }}
+                      </el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
                 </span>
@@ -229,6 +232,9 @@ export default {
         case 'share':
           this.share(param.data)
           break
+        case 'edit':
+          this.edit(param.data)
+          break
       }
     },
 
@@ -487,6 +493,9 @@ export default {
     closeGrant() {
       this.authResourceId = null
       this.authVisible = false
+    },
+    edit(data) {
+      this.$router.replace('/panelEdit')
     }
   }
 }
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index c9e94332a3..8218ab814d 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -1,50 +1,29 @@
 <template>
   <el-row style="height: 100%;overflow-y: hidden;width: 100%;">
     <el-row style="display: flex;height: 100%">
-      <el-col class="view-list">
-        <el-tabs v-model="ViewActiveName">
-          <!--视图展示操作-->
-          <el-tab-pane name="Views" class="view-list-thumbnails-outline">
-            <span slot="label"><i class="el-icon-s-data" />视图</span>
-            <draggable
-              v-model="panelDetails.viewsUsable"
-              :options="{group:{name: 'itxst',pull:'clone'},sort: true}"
-              animation="300"
-              :move="onMove"
-              style="height: 100%;overflow:auto"
-              @end="end1"
-            >
-              <transition-group>
-                <div v-for="item in panelDetails.viewsUsable" :key="item.name" @dblclick="panelViewAdd(item)">
-                  <span style="color: gray">{{ item.name }}</span>
-                  <img class="view-list-thumbnails" :src="'/common-files/images/'+item.id+'/VIEW_DEFAULT_IMAGE'" alt="">
-                </div>
-              </transition-group>
-            </draggable>
-          </el-tab-pane>
-
-          <!--通用组件操作-->
-          <el-tab-pane name="PublicTools">
-            <span slot="label"><i class="el-icon-s-grid" />组件</span>
-            开发中...
-          </el-tab-pane>
-        </el-tabs>
-      </el-col>
 
       <el-col class="panel-design">
         <!--TODO 仪表盘设计公共设置区域-->
         <el-row class="panel-design-head">
-          <span style="float: left;line-height: 40px; color: gray">名称：{{ panelInfo.name }}</span>
+          <span style="float: left;line-height: 40px; color: gray">
+
+            <span>名称：{{ panelInfo.name || '测试仪表板' }}</span>
+
+          </span>
           <span style="float: right;line-height: 40px;">
-            <el-button size="mini">
-              背景图
-            </el-button>
-            <el-button type="primary" size="mini" @click="savePanel">
-              保存
-            </el-button>
-            <el-button type="primary" size="mini" @click="preViewShow">
-              预览
-            </el-button>
+
+            <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-view" size="mini" circle @click="save" />
+            </el-tooltip>
+
           </span>
         </el-row>
         <el-row class="panel-design-show">
@@ -64,23 +43,20 @@
 
             </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 draggable from 'vuedraggable'
 import ChartComponent from '../../chart/components/ChartComponent'
 import VueDragResizeRotate from '@/components/vue-drag-resize-rotate'
 import { uuid } from 'vue-uuid'
 
 export default {
   name: 'PanelViewShow',
-  components: { draggable, ChartComponent, VueDragResizeRotate },
+  components: { ChartComponent, VueDragResizeRotate },
   data() {
     return {
       panelDetails: {
@@ -189,11 +165,12 @@ export default {
 
     },
     savePanel() {
-      debugger
       post('panel/group/saveGroupWithDesign', this.panelDetails, () => {
-        debugger
       })
       this.$success(this.$t('commons.save_success'))
+    },
+    save() {
+
     }
   }
 }
diff --git a/frontend/src/views/panel/new/PanelList.vue b/frontend/src/views/panel/new/PanelList.vue
deleted file mode 100644
index 696e552426..0000000000
--- a/frontend/src/views/panel/new/PanelList.vue
+++ /dev/null
@@ -1,542 +0,0 @@
-<template xmlns:el-col="http://www.w3.org/1999/html">
-  <el-col>
-    <!-- panel list -->
-    <el-col>
-      <el-row>
-        <span class="header-title">默认仪表盘</span>
-        <div class="block">
-          <el-tree
-            :default-expanded-keys="expandedArray"
-            :data="defaultData"
-            node-key="id"
-            :expand-on-click-node="true"
-            @node-click="panelDefaultClick"
-          >
-            <span slot-scope="{ data }" class="custom-tree-node">
-              <span>
-                <span>
-                  <el-button
-                    icon="el-icon-picture-outline"
-                    type="text"
-                  />
-                </span>
-                <span style="margin-left: 6px">{{ data.name }}</span>
-              </span>
-            </span>
-          </el-tree>
-        </div>
-      </el-row>
-
-      <el-row>
-        <span class="header-title">仪表盘列表</span>
-      </el-row>
-      <el-col class="custom-tree-container">
-        <div class="block">
-          <el-tree
-            :default-expanded-keys="expandedArray"
-            :data="tData"
-            node-key="id"
-            :expand-on-click-node="true"
-            @node-click="nodeClick"
-          >
-            <span slot-scope="{ node, data }" class="custom-tree-node">
-              <span>
-                <span v-if="data.nodeType === 'panel'">
-                  <el-button
-                    icon="el-icon-picture-outline"
-                    type="text"
-                  />
-                </span>
-                <span style="margin-left: 6px">{{ data.name }}</span>
-              </span>
-              <span>
-                <span v-if="data.nodeType ==='folder'" @click.stop>
-                  <el-dropdown trigger="click" size="small" @command="clickAdd">
-                    <span class="el-dropdown-link">
-                      <el-button
-                        icon="el-icon-plus"
-                        type="text"
-                        size="small"
-                      />
-                    </span>
-                    <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('folder',data,node)">
-                        {{ $t('panel.groupAdd') }}
-                      </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('panel',data,node)">
-                        {{ $t('panel.panelAdd') }}
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
-                  </el-dropdown>
-                </span>
-                <span style="margin-left: 12px;" @click.stop>
-                  <el-dropdown trigger="click" size="small" @command="clickMore">
-                    <span class="el-dropdown-link">
-                      <el-button
-                        icon="el-icon-more"
-                        type="text"
-                        size="small"
-                      />
-                    </span>
-                    <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
-                        {{ $t('panel.rename') }}
-                      </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
-                        {{ $t('panel.delete') }}
-                      </el-dropdown-item>
-                      <el-dropdown-item v-if="data.nodeType==='panel'" icon="el-icon-share" :command="beforeClickMore('share',data,node)">
-                        {{ $t('panel.share') }}
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
-                  </el-dropdown>
-                </span>
-              </span>
-            </span>
-          </el-tree>
-        </div>
-      </el-col>
-
-      <el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
-        <el-form ref="groupForm" :model="groupForm" :rules="groupFormRules">
-          <el-form-item :label="$t('commons.name')" prop="name">
-            <el-input v-model="groupForm.name" />
-          </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button size="mini" @click="close()">{{ $t('panel.cancel') }}</el-button>
-          <el-button type="primary" size="mini" @click="saveGroup(groupForm)">{{ $t('panel.confirm') }}
-          </el-button>
-        </div>
-      </el-dialog>
-
-      <el-dialog
-        :title="authTitle"
-        :visible.sync="authVisible"
-        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-col>
-  </el-col>
-</template>
-
-<script>
-import GrantAuth from '../GrantAuth'
-import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, defaultTree } from '@/api/panel/panel'
-
-export default {
-  name: 'PanelList',
-  components: { GrantAuth },
-  data() {
-    return {
-      authTitle: null,
-      authResourceId: null,
-      authVisible: false,
-      defaultData: [],
-      dialogTitle: '',
-      search: '',
-      editGroup: false,
-      editTable: false,
-      tData: [],
-      tableData: [],
-      currGroup: {},
-      expandedArray: [],
-      groupForm: {
-        name: null,
-        pid: null,
-        level: 0,
-        nodeType: null,
-        children: [],
-        sort: 'node_type desc,name asc'
-      },
-      tableForm: {
-        name: '',
-        mode: '',
-        sort: 'node_type asc,create_time desc,name asc'
-      },
-      groupFormRules: {
-        name: [
-          { required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
-        ]
-      },
-      tableFormRules: {
-        name: [
-          { required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
-        ],
-        mode: [
-          { required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  computed: {
-  },
-  watch: {
-    // search(val){
-    //   this.groupForm.name = val;
-    //   this.tree(this.groupForm);
-    // }
-  },
-  mounted() {
-    this.defaultTree()
-    this.tree(this.groupForm)
-    this.refresh()
-    this.tableTree()
-    // this.$router.push('/dataset');
-  },
-  methods: {
-    clickAdd(param) {
-      // console.log(param);
-      this.add(param.type)
-      this.groupForm.pid = param.data.id
-      this.groupForm.level = param.data.level + 1
-    },
-
-    beforeClickAdd(type, data, node) {
-      return {
-        'type': type,
-        'data': data,
-        'node': node
-      }
-    },
-
-    clickMore(param) {
-      console.log(param)
-      switch (param.type) {
-        case 'rename':
-          this.add(param.data.nodeType)
-          this.groupForm = JSON.parse(JSON.stringify(param.data))
-          break
-        case 'move':
-
-          break
-        case 'delete':
-          this.delete(param.data)
-          break
-        case 'editTable':
-          this.editTable = true
-          this.tableForm = JSON.parse(JSON.stringify(param.data))
-          this.tableForm.mode = this.tableForm.mode + ''
-          break
-        case 'deleteTable':
-          this.deleteTable(param.data)
-          break
-        case 'share':
-          this.share(param.data)
-          break
-      }
-    },
-
-    beforeClickMore(type, data, node) {
-      return {
-        'type': type,
-        'data': data,
-        'node': node
-      }
-    },
-
-    add(nodeType) {
-      switch (nodeType) {
-        case 'folder':
-          this.dialogTitle = this.$t('panel.groupAdd')
-          break
-        case 'panel':
-          this.dialogTitle = this.$t('panel.panelAdd')
-          break
-      }
-      this.groupForm.nodeType = nodeType
-      this.editGroup = true
-    },
-
-    saveGroup(group) {
-      // console.log(group);
-      this.$refs['groupForm'].validate((valid) => {
-        if (valid) {
-          addGroup(group).then(res => {
-            this.close()
-            this.$message({
-              message: this.$t('commons.save_success'),
-              type: 'success',
-              showClose: true
-            })
-            this.tree(this.groupForm)
-          })
-        } else {
-          this.$message({
-            message: this.$t('commons.input_content'),
-            type: 'error',
-            showClose: true
-          })
-          return false
-        }
-      })
-    },
-
-    saveTable(table) {
-      //   console.log(table)
-      table.mode = parseInt(table.mode)
-      this.$refs['tableForm'].validate((valid) => {
-        if (valid) {
-          addTable(table).then(response => {
-            this.closeTable()
-            this.$message({
-              message: this.$t('commons.save_success'),
-              type: 'success',
-              showClose: true
-            })
-            this.tableTree()
-            // this.$router.push('/dataset/home')
-            this.$emit('switchComponent', { name: '' })
-            this.$store.dispatch('dataset/setTable', null)
-          })
-        } else {
-          this.$message({
-            message: this.$t('commons.input_content'),
-            type: 'error',
-            showClose: true
-          })
-          return false
-        }
-      })
-    },
-
-    delete(data) {
-      this.$confirm(this.$t('panel.confirm_delete'), this.$t('panel.tips'), {
-        confirmButtonText: this.$t('panel.confirm'),
-        cancelButtonText: this.$t('panel.cancel'),
-        type: 'warning'
-      }).then(() => {
-        delGroup(data.id).then(response => {
-          this.$message({
-            type: 'success',
-            message: this.$t('panel.delete_success'),
-            showClose: true
-          })
-          this.tree(this.groupForm)
-        })
-      }).catch(() => {
-      })
-    },
-
-    deleteTable(data) {
-      this.$confirm(this.$t('panel.confirm_delete'), this.$t('panel.tips'), {
-        confirmButtonText: this.$t('panel.confirm'),
-        cancelButtonText: this.$t('panel.cancel'),
-        type: 'warning'
-      }).then(() => {
-        delTable(data.id).then(response => {
-          this.$message({
-            type: 'success',
-            message: this.$t('panel.delete_success'),
-            showClose: true
-          })
-          this.tableTree()
-          // this.$router.push('/dataset/home')
-          this.$emit('switchComponent', { name: '' })
-          this.$store.dispatch('dataset/setTable', null)
-        })
-      }).catch(() => {
-      })
-    },
-
-    close() {
-      this.editGroup = false
-      this.groupForm = {
-        name: null,
-        pid: null,
-        level: 0,
-        nodeType: null,
-        children: [],
-        sort: 'node_type desc,name asc'
-      }
-    },
-
-    closeTable() {
-      this.editTable = false
-      this.tableForm = {
-        name: ''
-      }
-    },
-
-    tree(group) {
-      groupTree(group).then(res => {
-        this.tData = res.data
-      })
-    },
-    defaultTree() {
-      const requestInfo = {
-        panelType: 'system'
-      }
-      defaultTree(requestInfo).then(res => {
-        this.defaultData = res.data
-      })
-    },
-
-    tableTree() {
-      this.tableData = []
-      if (this.currGroup.id) {
-        loadTable({
-          sort: 'type asc,create_time desc,name asc',
-          sceneId: this.currGroup.id
-        }).then(res => {
-          this.tableData = res.data
-        })
-      }
-    },
-
-    nodeClick(data, node) {
-      if (data.nodeType === 'panel') {
-        this.currGroup = data
-        // this.$store.dispatch('panel/setPanelInfo', data)
-        this.$router.replace('/panelEdit')
-      }
-      if (node.expanded) {
-        this.expandedArray.push(data.id)
-      } else {
-        const index = this.expandedArray.indexOf(data.id)
-        if (index > -1) {
-          this.expandedArray.splice(index, 1)
-        }
-      }
-      // console.log(this.expandedArray);
-    },
-
-    back() {
-      this.sceneMode = false
-      //   const route = this.$store.state.permission.currentRoutes
-      //   console.log(route)
-      // this.$router.push('/dataset/index')
-      this.$store.dispatch('dataset/setSceneData', null)
-      this.$emit('switchComponent', { name: '' })
-    },
-
-    clickAddData(param) {
-      // console.log(param);
-      switch (param.type) {
-        case 'db':
-          this.addDB()
-          break
-        case 'sql':
-          this.$message(param.type)
-          break
-        case 'excel':
-          this.$message(param.type)
-          break
-        case 'custom':
-          this.$message(param.type)
-          break
-      }
-    },
-
-    beforeClickAddData(type) {
-      return {
-        'type': type
-      }
-    },
-
-    addDB() {
-      // this.$router.push({
-      //   name: 'add_db',
-      //   params: {
-      //     scene: this.currGroup
-
-      //   }
-      // })
-      this.$emit('switchComponent', { name: 'AddDB', param: this.currGroup })
-    },
-
-    sceneClick(data, node) {
-      // console.log(data);
-      this.$store.dispatch('dataset/setTable', null)
-      this.$store.dispatch('dataset/setTable', data.id)
-      // this.$router.push({
-      //   name: 'table',
-      //   params: {
-      //     table: data
-      //   }
-      // })
-      this.$emit('switchComponent', { name: 'ViewTable' })
-    },
-
-    refresh() {
-      const path = this.$route.path
-      if (path === '/dataset/table') {
-        this.sceneMode = true
-        const sceneId = this.$store.state.dataset.sceneData
-        getScene(sceneId).then(res => {
-          this.currGroup = res.data
-        })
-      }
-    },
-    panelDefaultClick(data, node) {
-      console.log(data)
-      console.log(node)
-      this.$store.dispatch('panel/setPanelInfo', data)
-      // 切换view
-      this.$emit('switchComponent', { name: 'PanelView' })
-    },
-    share(data) {
-      this.authResourceId = data.id
-      this.authTitle = '把[' + data.label + ']分享给'
-      this.authVisible = true
-    },
-    closeGrant() {
-      this.authResourceId = null
-      this.authVisible = false
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .header-title {
-    font-size: 14px;
-    flex: 1;
-    color: #606266;
-    font-weight: bold;
-
-  }
-
-  .el-divider--horizontal {
-    margin: 12px 0
-  }
-
-  .search-input {
-    padding: 12px 0;
-  }
-
-  .custom-tree-node {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding-right: 8px;
-  }
-
-  .custom-position {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    flex-flow: row nowrap;
-  }
-
-  .form-item {
-    margin-bottom: 0;
-  }
-
-  .title-css {
-    height: 26px;
-  }
-
-  .title-text {
-    line-height: 26px;
-  }
-
-</style>
diff --git a/frontend/src/views/panel/new/PanelViewShow.vue b/frontend/src/views/panel/new/PanelViewShow.vue
deleted file mode 100644
index aeeb5fe3d4..0000000000
--- a/frontend/src/views/panel/new/PanelViewShow.vue
+++ /dev/null
@@ -1,398 +0,0 @@
-<template>
-  <el-row style="height: 100%;overflow-y: hidden;width: 100%;">
-    <el-row style="display: flex;height: 100%">
-
-      <el-col class="panel-design">
-        <!--TODO 仪表盘设计公共设置区域-->
-        <el-row class="panel-design-head">
-          <span style="float: left;line-height: 40px; color: gray">
-
-            <span>名称：{{ panelInfo.name || '测试仪表板' }}</span>
-
-          </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-view" size="mini" circle @click="save" />
-            </el-tooltip>
-
-          </span>
-        </el-row>
-        <el-row class="panel-design-show">
-          <div class="container" style="overflow-y: auto">
-
-            <div :style="gridStyle">
-              <!--              <draggable-->
-              <!--                v-model="thumbnailsTmp"-->
-              <!--                :options="{group:{name: 'itxst',pull:'clone'},sort: true}"-->
-              <!--                animation="300"-->
-              <!--                :move="onMove"-->
-              <!--                style="height: 100%;overflow:auto"-->
-              <!--                @end="end1"-->
-              <!--              >-->
-              <vdrr v-for="item in thumbnailsTmp" v-show="item.keepFlag" :key="item.name" :view-id="item.id" :parent="true" @newStyle="newStyle" @removeView="removeView">
-                <img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt="">
-              </vdrr>
-              <!--            </draggable>-->
-
-            </div>
-          </div>
-
-          <!--          <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">-->
-          <!--            <div id="echart" style="width: 100%;height: 80vh;"/>-->
-          <!--          </div>-->
-        </el-row>
-
-      </el-col>
-    </el-row>
-  </el-row>
-</template>
-
-<script>
-import { post } from '@/api/dataset/dataset'
-
-export default {
-  name: 'PanelViewShow',
-  data() {
-    return {
-      gridStyle: {
-        position: 'relative',
-        height: '2000px',
-        width: '2000px',
-        backgroundColor: '#808080',
-        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',
-      table: {},
-      thumbnailsTmp: [
-        { id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST1', keepFlag: true, style: '' },
-        { id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2', keepFlag: true, style: '' }
-      ],
-      thumbnails: [
-        { id: 'e70d7955-44dc-4158-9002-7b48ed0d5d80', name: 'TEST1' },
-        { id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2' },
-        { id: 'aebc8346-c3f2-44ad-97d3-1e36a10dd0fa', name: 'TEST3' },
-        { id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST4' }
-      ],
-      quota: [],
-      view: {
-        xaxis: [],
-        yaxis: [],
-        show: true,
-        type: 'bar',
-        title: ''
-      },
-      // 定义要被拖拽对象的数组
-      arr1: [
-        { id: 1, name: 'id' },
-        { id: 2, name: '名称' },
-        { id: 3, name: '类型' },
-        { id: 5, name: '状态' },
-        { id: 4, name: '指标指标指标' }
-      ],
-      arr2: [
-        { id: 11, name: '容量' }
-      ],
-      moveId: -1
-    }
-  },
-  computed: {
-    panelInfo() {
-      return this.$store.state.panel.panelInfo
-    }
-
-  },
-  watch: {},
-  created() {
-    // this.get(this.$store.state.chart.viewId);
-  },
-  mounted() {
-    // this.get(this.$store.state.chart.viewId);
-    this.getData(this.$store.state.chart.viewId)
-    // this.myEcharts();
-  },
-  activated() {
-  },
-  methods: {
-    panelViewAdd(item) {
-      const pushItem = {
-        id: item.id,
-        name: item.name,
-        keepFlag: true
-      }
-      debugger
-      this.thumbnailsTmp.push(pushItem)
-      console.log(this.thumbnailsTmp)
-    },
-    removeView(viewId) {
-      this.thumbnailsTmp.forEach(function(item, index) {
-        if (item.id === viewId) {
-          item.keepFlag = false
-        }
-      })
-    },
-    newStyle(viewId, newStyleInfo) {
-      console.log(viewId)
-      console.log(JSON.stringify(newStyleInfo))
-    },
-    initTableData(id) {
-      if (id != null) {
-        post('/dataset/table/get/' + id, null).then(response => {
-          this.table = response.data
-          this.initTableField(id)
-        })
-      }
-    },
-    initTableField(id) {
-      post('/dataset/table/getFieldsFromDE', this.table).then(response => {
-        this.thumbnails = response.data.thumbnails
-        this.quota = response.data.quota
-      })
-    },
-    click1(item) {
-      // console.log(item);
-      const c = this.view.xaxis.filter(function(ele) {
-        return ele.id === item.id
-      })
-      // console.log(c);
-      if (c && c.length === 0) {
-        this.view.xaxis.push(item)
-      }
-    },
-    click2(item) {
-      // console.log(item);
-      const c = this.view.yaxis.filter(function(ele) {
-        return ele.id === item.id
-      })
-      // console.log(c);
-      if (c && c.length === 0) {
-        this.view.yaxis.push(item)
-      }
-    },
-    clear1(index) {
-      this.view.xaxis.splice(index, 1)
-    },
-    clear2(index) {
-      this.view.yaxis.splice(index, 1)
-    },
-    get(id) {
-      if (id) {
-        post('/chart/view/get/' + id, null).then(response => {
-          this.view = response.data
-          this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
-          this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
-        })
-      } else {
-        this.view = {}
-      }
-    },
-    save() {
-      const view = JSON.parse(JSON.stringify(this.view))
-      view.id = this.view.id
-      view.sceneId = this.sceneId
-      view.name = this.table.name
-      view.tableId = this.$store.state.chart.tableId
-      view.xaxis = JSON.stringify(view.xaxis)
-      view.yaxis = JSON.stringify(view.yaxis)
-      post('/chart/view/save', view).then(response => {
-        // this.get(response.data.id);
-        this.getData(response.data.id)
-        this.$store.dispatch('chart/setChartSceneData', null)
-        this.$store.dispatch('chart/setChartSceneData', this.sceneId)
-      })
-    },
-    getData(id) {
-    //   if (id) {
-    //     post('/chart/view/getData/' + id, null).then(response => {
-    //       this.view = response.data
-    //       this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
-    //       this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
-
-    //       const chart = response.data
-    //       const chart_option = JSON.parse(JSON.stringify(BASE_BAR))
-    //       // console.log(chart_option);
-    //       if (chart.data) {
-    //         chart_option.title.text = chart.title
-    //         chart_option.xAxis.data = chart.data.x
-    //         chart.data.series.forEach(function(y) {
-    //           chart_option.legend.data.push(y.name)
-    //           chart_option.series.push(y)
-    //         })
-    //       }
-    //       // console.log(chart_option);
-    //       this.myEcharts(chart_option)
-    //     })
-    //   } else {
-    //     this.view = {}
-    //   }
-    },
-
-    // 左边往右边拖动时的事件
-    end1(e) {
-      // console.log(e)
-      // var that = this;
-      // var items = this.arr2.filter(function (m) {
-      //   return m.id == that.moveId
-      // })
-      // //如果左边
-      // if (items.length < 2) return;
-      // this.arr2.splice(e.newDraggableIndex, 1)
-    },
-    // 右边往左边拖动时的事件
-    end2(e) {
-      // console.log(e)
-      // var that = this;
-      // var items = this.yAxisData.filter(function (m) {
-      //   return m.id == that.moveId
-      // })
-      // //如果左边
-      // if (items.length < 2) return;
-      // this.yAxisData.splice(e.newDraggableIndex, 1)
-    },
-    end3(e) {
-
-    },
-    end4(e) {
-
-    },
-    // move回调方法
-    onMove(e, originalEvent) {
-      console.log(e)
-      // this.moveId = e.relatedContext.element.id;
-      // //不允许停靠
-      // if (e.relatedContext.element.id == 1) return false;
-      // //不允许拖拽
-      // if (e.draggedContext.element.id == 4) return false;
-      // if (e.draggedContext.element.id == 11) return false;
-      return true
-    },
-
-    myEcharts(option) {
-      // 基于准备好的dom，初始化echarts实例
-      var myChart = this.$echarts.init(document.getElementById('echart'))
-      // 指定图表的配置项和数据
-      setTimeout(myChart.setOption(option, true), 500)
-      window.onresize = function() {
-        myChart.resize()
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .view-list {
-    height: 100%;
-    width: 20%;
-    min-width: 180px;
-    max-width: 220px;
-    border: 1px solid #E6E6E6;
-    border-left: 0 solid;
-    overflow-y: auto;
-  }
-
-  .view-list-thumbnails-outline {
-    height: 100%;
-    overflow-y: auto;
-  }
-
-  .view-list-thumbnails {
-    width: 100%;
-    padding: 0px 15px 15px 0px;
-  }
-
-  .panel-design {
-    height: 100%;
-    min-width: 500px;
-    border-top: 1px solid #E6E6E6;
-  }
-
-  .panel-design-head {
-    height: 40px;
-  }
-
-  .panel-design-show {
-    height: 100%;
-    width: 100%;
-    border-top: 1px solid #E6E6E6;
-  }
-
-  .padding-lr {
-    padding: 0 6px;
-  }
-
-  .itxst {
-    margin: 10px;
-    text-align: left;
-  }
-
-  .col {
-    width: 40%;
-    flex: 1;
-    padding: 10px;
-    border: solid 1px #eee;
-    border-radius: 5px;
-    float: left;
-  }
-
-  .col + .col {
-    margin-left: 10px;
-  }
-
-  .item {
-    padding: 2px 12px;
-    margin: 3px 3px 0 3px;
-    border: solid 1px #eee;
-    background-color: #f1f1f1;
-    text-align: left;
-    display: block;
-  }
-
-  .item + .item {
-    border-top: none;
-    margin-top: 3px;
-  }
-
-  .item:hover {
-    background-color: #fdfdfd;
-    cursor: pointer;
-  }
-
-  .item-axis {
-    padding: 2px 12px;
-    margin: 3px 3px 0 3px;
-    border: solid 1px #eee;
-    background-color: #f1f1f1;
-    text-align: left;
-  }
-
-  .item-axis:hover {
-    background-color: #fdfdfd;
-    cursor: pointer;
-  }
-
-  .el-form-item {
-    margin-bottom: 0;
-  }
-
-  .container {
-    width: 100%;
-    height: 600px;
-    border: 1px solid #000;
-    position: relative;
-    box-sizing: border-box;
-  }
-
-  span {
-    font-size: 12px;
-  }
-</style>
diff --git a/frontend/src/views/panel/new/edit.vue b/frontend/src/views/panel/new/edit.vue
deleted file mode 100644
index 56612d84cc..0000000000
--- a/frontend/src/views/panel/new/edit.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<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>
diff --git a/frontend/src/views/panel/new/index1.vue b/frontend/src/views/panel/new/index1.vue
deleted file mode 100644
index 2796623cf4..0000000000
--- a/frontend/src/views/panel/new/index1.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<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>