feat:增加仪表盘设计组件及设计

frontend/src/components/vue-drag-resize-rotate/index.vue

@@ -26,6 +26,7 @@
     >
       <slot :name="handle"></slot>
     </div>
+    <i class="el-icon-circle-close" @click.stop="removeView()"></i>
     <slot></slot>
   </div>
 </template>
@@ -68,6 +69,10 @@ export default {
   replace: true,
   name: 'vue-drag-resize-rotate',
   props: {
+    viewId: {
+      type: String,
+      default: ''
+    },
     className: {
       type: String,
       default: 'vdr'
@@ -141,7 +146,7 @@ export default {
       type: Boolean,
       default: false
     },
-    // 新增 外部传入纵横比 w/h 
+    // 新增 外部传入纵横比 w/h
     outsideAspectRatio: {
       type: [Number, String],
       default: 0
@@ -394,6 +399,11 @@ export default {
   },
 
   methods: {
+    removeView(){
+      debugger
+      console.log(this.viewId);
+      this.$emit('removeView',this.viewId)
+    },
     // 重置边界和鼠标状态
     resetBoundsAndMouseState() {
       this.mouseClickPosition = { mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0 }
@@ -1310,13 +1320,15 @@ export default {
       }
     },
     style() {
-      return {
+      let newStyle ={
         transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
         width: this.computedWidth,
         height: this.computedHeight,
         zIndex: this.zIndex,
         ...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
       };
+      this.$emit('newStyle', this.viewId,newStyle);
+      return newStyle;
     },
     // 控制柄显示与否
     actualHandles() {
@@ -1503,4 +1515,11 @@ export default {
   height: 7px;
   background-color: #666;
 }
+
+.close {
+  float: right;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
 </style>

frontend/src/main.js

@@ -19,6 +19,9 @@ import message from '@/metersphere/common/js/message'
 import { left2RightDrag, bottom2TopDrag, right2LeftDrag } from '@/metersphere/common/js/directive'
 import directives from './directive'
 
+import './styles/vdrr/common-temp.scss'
+
+
 import vdrr from './components/vue-drag-resize-rotate'
 Vue.component('vdrr', vdrr)
 

frontend/src/styles/vdrr/common-temp.scss

@@ -0,0 +1,8 @@
+
+.vdr {
+  border: 1px dashed;
+}
+
+.vdrr {
+  border: 1px dashed;
+}

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

@@ -0,0 +1,393 @@
+<template xmlns:el-col="http://www.w3.org/1999/html">
+    <el-row style="height: 100%;overflow-y: hidden;width: 100%;">
+      <span>仪表盘名称：{{panelName}}</span>
+    </el-row>
+</template>
+
+<script>
+  import {loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree} from '@/api/dataset/dataset'
+
+  export default {
+    name: 'PanelView',
+    data() {
+      return {
+        sceneMode: false,
+        dialogTitle: '',
+        search: '',
+        editGroup: false,
+        editTable: false,
+        tData: [],
+        tableData: [],
+        currGroup: {},
+        expandedArray: [],
+        groupForm: {
+          name: '',
+          pid: null,
+          level: 0,
+          type: '',
+          children: [],
+          sort: 'type desc,name asc'
+        },
+        tableForm: {
+          name: '',
+          mode: '',
+          sort: '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: {
+      panelName: function () {
+        console.log(this.$store.state.panel.panelName)
+        return this.$store.state.panel.panelName
+      }
+    },
+    watch: {
+      // search(val){
+      //   this.groupForm.name = val;
+      //   this.tree(this.groupForm);
+      // }
+    },
+    mounted() {
+      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.type)
+            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
+        }
+      },
+
+      beforeClickMore(type, data, node) {
+        return {
+          'type': type,
+          'data': data,
+          'node': node
+        }
+      },
+
+      add(type) {
+        switch (type) {
+          case 'group':
+            this.dialogTitle = this.$t('dataset.group')
+            break
+          case 'scene':
+            this.dialogTitle = this.$t('dataset.scene')
+            break
+        }
+        this.groupForm.type = type
+        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('dataset.confirm_delete'), this.$t('dataset.tips'), {
+          confirmButtonText: this.$t('dataset.confirm'),
+          cancelButtonText: this.$t('dataset.cancel'),
+          type: 'warning'
+        }).then(() => {
+          delGroup(data.id).then(response => {
+            this.$message({
+              type: 'success',
+              message: this.$t('dataset.delete_success'),
+              showClose: true
+            })
+            this.tree(this.groupForm)
+          })
+        }).catch(() => {
+        })
+      },
+
+      deleteTable(data) {
+        this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
+          confirmButtonText: this.$t('dataset.confirm'),
+          cancelButtonText: this.$t('dataset.cancel'),
+          type: 'warning'
+        }).then(() => {
+          delTable(data.id).then(response => {
+            this.$message({
+              type: 'success',
+              message: this.$t('dataset.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: '',
+          pid: null,
+          level: 0,
+          type: '',
+          children: [],
+          sort: 'type desc,name asc'
+        }
+      },
+
+      closeTable() {
+        this.editTable = false
+        this.tableForm = {
+          name: ''
+        }
+      },
+
+      tree(group) {
+        groupTree(group).then(res => {
+          this.tData = 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) {
+        // console.log(data);
+        // console.log(node);
+        if (data.type === 'scene') {
+          this.sceneMode = true
+          this.currGroup = data
+          this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
+        }
+        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);
+      },
+    }
+  }
+</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>

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

@@ -5,7 +5,7 @@
         <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>
+            <span slot="label"><i class="el-icon-s-data"/>视图</span>
             <draggable
               v-model="thumbnails"
               :options="{group:{name: 'itxst',pull:'clone'},sort: true}"
@@ -15,35 +15,57 @@
               @end="end1"
             >
               <transition-group>
-                <img class="view-list-thumbnails" v-for="item in thumbnails" :key="item.name" :src="'/common-files/images/'+item.id" alt=""/>
+                <div v-for="item in thumbnails" :key="item.name"  v-on:dblclick = panelViewAdd(item)>
+                  <span style="color: gray">{{item.name}}</span>
+                  <img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt=""/>
+                </div>
               </transition-group>
             </draggable>
           </el-tab-pane>
 
           <!--通用组件操作-->
           <el-tab-pane name="PublicTools">
-            <span slot="label"><i class="el-icon-s-grid" />组件</span>
+            <span slot="label"><i class="el-icon-s-grid"/>组件</span>
             开发中...
           </el-tab-pane>
         </el-tabs>
       </el-col>
 
       <el-col class="panel-design">
-          <!--TODO 仪表盘设计公共设置区域-->
+        <!--TODO 仪表盘设计公共设置区域-->
-          <el-row class="panel-design-head">
+        <el-row class="panel-design-head">
             <span style="float: right;line-height: 40px;">
               <el-button size="mini">
                 背景图
               </el-button>
               <el-button type="primary" size="mini" @click="save">
-                透视
+                预览
               </el-button>
             </span>
-          </el-row>
+        </el-row>
         <el-row class="panel-design-show">
-          <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
+          <div class="container" style="overflow-y: auto">
-            <div id="echart" style="width: 100%;height: 80vh;"/>
+
+            <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-if="item.keepFlag" :view-id="item.id" :parent="true" v-for="item in thumbnailsTmp" :key="item.name" @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>
@@ -52,217 +74,251 @@
 </template>
 
 <script>
-import { post } from '@/api/dataset/dataset'
+  import {post} from '@/api/dataset/dataset'
-import draggable from 'vuedraggable'
+  import draggable from 'vuedraggable'
-import { BASE_BAR } from '../chart/chart'
+  import {BASE_BAR} from '../chart/chart'
 
-export default {
+  export default {
-  name: 'PanelViewShow',
+    name: 'PanelViewShow',
-  components: { draggable },
+    components: {draggable},
-  data() {
+    data() {
-    return {
+      return {
-      ViewActiveName:'Views',
+        gridStyle: {
-      table: {},
+          position: 'relative',
-      thumbnails: [
+          height: '2000px',
-        {id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST1'},
+          width: '2000px',
-        {id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST2'},
+          backgroundColor: '#808080',
-        {id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST3'},
+          background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)',
-        {id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST4'}
+          backgroundSize: '20px 20px, 20px 20px'
-      ],
+        },
-      quota: [],
+        ViewActiveName: 'Views',
-      view: {
+        table: {},
-        xaxis: [],
+        thumbnailsTmp: [
-        yaxis: [],
+          {id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST1',keepFlag:true,style:''},
-        show: true,
+          {id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2',keepFlag:true,style:''}
-        type: 'bar',
+        ],
-        title: ''
+        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: {
+      tableId() {
+        // console.log(this.$store.state.chart.tableId);
+        this.initTableData(this.$store.state.chart.tableId)
+        return this.$store.state.chart.tableId
       },
-      // 定义要被拖拽对象的数组
+      sceneId() {
-      arr1: [
+        // console.log(this.$store.state.chart.sceneId);
-        { id: 1, name: 'id' },
+        return this.$store.state.chart.sceneId
-        { id: 2, name: '名称' },
+      },
-        { id: 3, name: '类型' },
+      vId() {
-        { id: 5, name: '状态' },
+        // console.log(this.$store.state.chart.viewId);
-        { id: 4, name: '指标指标指标' }
+        this.getData(this.$store.state.chart.viewId)
-      ],
+        return this.$store.state.chart.viewId
-      arr2: [
+      }
-        { id: 11, name: '容量' }
+
-      ],
-      moveId: -1
-    }
-  },
-  computed: {
-    tableId() {
-      // console.log(this.$store.state.chart.tableId);
-      this.initTableData(this.$store.state.chart.tableId)
-      return this.$store.state.chart.tableId
     },
-    sceneId() {
+    watch: {},
-      // console.log(this.$store.state.chart.sceneId);
+    created() {
-      return this.$store.state.chart.sceneId
+      // this.get(this.$store.state.chart.viewId);
     },
-    vId() {
+    mounted() {
-      // console.log(this.$store.state.chart.viewId);
+      // this.get(this.$store.state.chart.viewId);
       this.getData(this.$store.state.chart.viewId)
-      return this.$store.state.chart.viewId
+      // this.myEcharts();
-    }
+    },
-
+    activated() {
-  },
+    },
-  watch: {},
+    methods: {
-  created() {
+      panelViewAdd(item){
-    // this.get(this.$store.state.chart.viewId);
+        let pushItem = {
-  },
+          id:item.id,
-  mounted() {
+          name:item.name,
-    // this.get(this.$store.state.chart.viewId);
+          keepFlag:true
-    this.getData(this.$store.state.chart.viewId)
+        }
-    // this.myEcharts();
+        debugger
-  },
+        this.thumbnailsTmp.push(pushItem)
-  activated() {
+        console.log(this.thumbnailsTmp);
-  },
+      },
-  methods: {
+      removeView(viewId) {
-    initTableData(id) {
+        this.thumbnailsTmp.forEach(function(item, index) {
-      if (id != null) {
+         if(item.id===viewId){
-        post('/dataset/table/get/' + id, null).then(response => {
+           item.keepFlag = false
-          this.table = response.data
+         }
-          this.initTableField(id)
         })
-      }
+      },
-    },
+      newStyle(viewId,newStyleInfo) {
-    initTableField(id) {
+        console.log(viewId);
-      post('/dataset/table/getFieldsFromDE', this.table).then(response => {
+        console.log(JSON.stringify(newStyleInfo))
-        this.thumbnails = response.data.thumbnails
+
-        this.quota = response.data.quota
+      },
-      })
+      initTableData(id) {
-    },
+        if (id != null) {
-    click1(item) {
+          post('/dataset/table/get/' + id, null).then(response => {
-      // console.log(item);
+            this.table = response.data
-      const c = this.view.xaxis.filter(function(ele) {
+            this.initTableField(id)
-        return ele.id === item.id
+          })
-      })
+        }
-      // console.log(c);
+      },
-      if (c && c.length === 0) {
+      initTableField(id) {
-        this.view.xaxis.push(item)
+        post('/dataset/table/getFieldsFromDE', this.table).then(response => {
-      }
+          this.thumbnails = response.data.thumbnails
-    },
+          this.quota = response.data.quota
-    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 = {}
+      click1(item) {
-      }
+        // console.log(item);
-    },
+        const c = this.view.xaxis.filter(function (ele) {
-    save() {
+          return ele.id === item.id
-      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 {
+        // console.log(c);
-        this.view = {}
+        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
-    end1(e) {
+            const chart_option = JSON.parse(JSON.stringify(BASE_BAR))
-      // console.log(e)
+            // console.log(chart_option);
-      // var that = this;
+            if (chart.data) {
-      // var items = this.arr2.filter(function (m) {
+              chart_option.title.text = chart.title
-      //   return m.id == that.moveId
+              chart_option.xAxis.data = chart.data.x
-      // })
+              chart.data.series.forEach(function (y) {
-      // //如果左边
+                chart_option.legend.data.push(y.name)
-      // if (items.length < 2) return;
+                chart_option.series.push(y)
-      // this.arr2.splice(e.newDraggableIndex, 1)
+              })
-    },
+            }
-    // 右边往左边拖动时的事件
+            // console.log(chart_option);
-    end2(e) {
+            this.myEcharts(chart_option)
-      // console.log(e)
+          })
-      // var that = this;
+        } else {
-      // var items = this.yAxisData.filter(function (m) {
+          this.view = {}
-      //   return m.id == that.moveId
+        }
-      // })
+      },
-      // //如果左边
-      // if (items.length < 2) return;
-      // this.yAxisData.splice(e.newDraggableIndex, 1)
-    },
-    end3(e) {
 
-    },
+      // 左边往右边拖动时的事件
-    end4(e) {
+      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) {
 
-    },
+      },
-    // move回调方法
+      end4(e) {
-    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实例
+      // move回调方法
-      var myChart = this.$echarts.init(document.getElementById('echart'))
+      onMove(e, originalEvent) {
-      // 指定图表的配置项和数据
+        console.log(e)
-      setTimeout(myChart.setOption(option, true), 500)
+        // this.moveId = e.relatedContext.element.id;
-      window.onresize = function() {
+        // //不允许停靠
-        myChart.resize()
+        // 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>
@@ -270,15 +326,17 @@ export default {
     height: 100%;
     width: 20%;
     min-width: 180px;
-    max-width:220px;
+    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;
@@ -358,6 +416,14 @@ export default {
     margin-bottom: 0;
   }
 
+  .container {
+    width: 100%;
+    height: 600px;
+    border: 1px solid #000;
+    position: relative;
+    box-sizing: border-box;
+  }
+
   span {
     font-size: 12px;
   }