feat：替换panel接口添加group（50%）

2021-04-07 11:21:12 +08:00
parent 2b61063b44
commit d7a7f31c1c
14 changed files with 2168 additions and 42 deletions
--- a/nezha-fronted/src/components/charts/chart-group.vue
+++ b/nezha-fronted/src/components/charts/chart-group.vue
@@ -0,0 +1,300 @@
+<style lang="scss">
+  @import './chart.scss';
+</style>
+<template>
+  <div class="nz-chart-resize">
+    <div class="resize-shadow" ref="resizeShadow"></div>
+    <div class="resize-box resize-box-group" ref="resizeBox">
+      <div class="chart-url" :id="'chartUrlDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
+        <loading  :ref="'localLoading'+chartIndex"></loading>
+        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
+          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
+            <el-dropdown-menu style="display: none"></el-dropdown-menu>
+            <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
+              <span class="chart-title-text">{{chartData.title}}</span>
+              <span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze  "  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
+            </span>
+            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
+              <li  @click="refreshChart" class="el-dropdown-menu__item">
+                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
+              <li  @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
+                <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
+              <li  @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
+                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
+              <li  @click="showAllScreen"  class="el-dropdown-menu__item">
+                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
+              <li  @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
+                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
+            </ul>
+          </el-dropdown>
+
+        </div>
+        <div :id="'chartUrl'+chartIndex" class="mt-10 url-container">
+          <chart-list-group :groupList.sync="chartData.children" :panel-lock="panelLock" :filterParent="filter"  :class="{'show-top':false}" :hasGroup="false" :from="from" ref="listGroup" :panelId="panelId"></chart-list-group>
+        </div>
+        <div style="position: absolute;width: 100%; top:calc(50% - 50px);text-align: center;" v-if="showStatic">
+          <div  :id="'staticContainer'+chartIndex" class="center-content"></div>
+        </div>
+      </div>
+<!--      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>-->
+    </div>
+  </div>
+</template>
+
+<script>
+import loading from '../common/loading'
+import chartListGroup from './chart-list-group'
+export default {
+  name: 'chartGroup',
+  components: {
+    loading: loading,
+    chartListGroup
+  },
+  props: {
+    chartData: {
+      type: Object
+    },
+    // 看板id
+    panelId: {
+      type: Number,
+      default: 0
+    },
+    editChartId: {
+      type: String,
+      default: 'editChartId'
+    },
+    chartIndex: {
+      type: Number,
+      default: 0
+    },
+    from: { type: String },
+    isLock: { type: Boolean, default: false },
+    filter: {},
+    panelLock: { type: Boolean, default: false },
+    dataList: {}
+  },
+  data () {
+    return {
+      data: {}, // 该图表信息,chartItem
+      unit: {},
+
+      images: '',
+      loading: Object,
+      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+      firstLoad: false, // 是否第一次加载
+      screenModal: false,
+      firstShow: false, // 默认不显示操作按钮,
+      caretShow: false,
+      dragTitleShow: false,
+      dropdownMenuShow: false,
+      minHeight: 200,
+      chartSpaceHeight: 5, // top-border: 1,bottom-border: 1,padding-bottome:3
+      titleHeight: 38, // title-height:28,magrin-bottom:10
+      paddingBottom: 6,
+      divFirstShow: false,
+      showStatic: false
+    }
+  },
+  methods: {
+    startResize (e) {
+      const vm = this
+      this.$chartResizeTool.start(vm, this.chartData, e)
+    },
+    resize (chartItem) {
+      const chartBox = document.getElementById('chartUrlDiv' + this.chartIndex)
+      chartBox.querySelector('.url-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
+    },
+    showLoad (chartItem) {
+      this.data = chartItem
+      this.panelIdInner = this.panelId
+      // 设置高度
+      this.$nextTick(() => {
+        this.resize(chartItem)
+      })
+      this.startLoading()
+
+      if (/\{\{.*?\}\}/g.test(this.data.param.url)) {
+        this.showStatic = true
+        this.setStaticContent()
+      } else {
+        this.showStatic = false
+        this.setLoadFrame()
+      }
+      this.divFirstShow = true
+    },
+    setStaticContent: function () {
+      const that = this
+      this.$nextTick(() => {
+        const staticDiv = document.querySelector('#staticContainer' + this.chartIndex)
+        staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
+        that.firstShow = true
+        that.endLoading()
+      })
+    },
+    setLoadFrame () {
+      const that = this
+      this.$nextTick(() => {
+        const iframe = document.querySelector('#urlContainer' + this.chartIndex)
+        // 处理兼容行问题
+        if (iframe.attachEvent) {
+          iframe.attachEvent('onload', function () {
+            // iframe加载完毕以后执行操作
+            that.firstShow = true
+            // console.log('iframe已加载完毕');
+            that.endLoading()
+          })
+        } else {
+          iframe.onload = function () {
+            // iframe加载完毕以后执行操作
+            that.firstShow = true
+            // console.log('iframe已加载完毕');
+            that.endLoading()
+          }
+        }
+        iframe.src = that.data.param.url
+      })
+    },
+    initDialog () {
+      this.startLoading('screen')
+      if (/\{\{.*?\}\}/g.test(this.data.param.url)) {
+        this.showStatic = true
+        this.setStaticContentFull()
+      } else {
+        this.showStatic = false
+        this.setLoadFrameFull()
+      }
+    },
+    startLoading (area) {
+      if (area === 'screen') {
+        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
+      } else {
+        this.$refs['localLoading' + this.chartIndex].startLoading()
+      }
+    },
+    endLoading (area) {
+      if (area === 'screen') {
+        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
+      } else {
+        this.$refs['localLoading' + this.chartIndex].endLoading()
+      }
+    },
+    clearChart () {
+      this.data = {}
+    },
+    screenRefreshChart () {
+      ('urlContainerFull' + this.chartIndex).window.location.reload()
+    },
+    // 重新请求数据 刷新操作-local
+    refreshChart () {
+      this.dropdownMenuShow = false
+      // this.startLoading()
+      this.firstShow = false
+      this.$refs.listGroup.refresh()
+    },
+    // 编辑图表
+    editChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-edit-chart-block', this.data.id)
+    },
+    // 删除该图表
+    removeChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-remove-chart-block', this.data.id)
+    },
+    clickos () {
+      this.dropdownMenuShow = false
+    },
+    // 全屏查看
+    showAllScreen () {
+      this.dropdownMenuShow = false
+      this.screenModal = true
+    },
+    duplicate () {
+      this.dropdownMenuShow = false
+      this.$confirm(this.$t('tip.confirmDuplicate'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'info'
+      }).then(() => {
+        const param = { id: this.data.id }
+        this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t('tip.duplicateSuccess')
+            })
+            this.$emit('on-duplicate-chart-block', this.data.id, response.data)
+          } else {
+            if (response.msg) {
+              this.$message.error(response.msg)
+            } else if (response.error) {
+              this.$message.error(response.error)
+            } else {
+              this.$message.error(response)
+            }
+          }
+        })
+      })
+    },
+    setLoadFrameFull () {
+      const that = this
+      this.$nextTick(() => {
+        const iframe = document.querySelector('#urlContainerFull' + this.chartIndex)
+
+        // 处理兼容行问题
+        if (iframe.attachEvent) {
+          iframe.attachEvent('onload', function () {
+            // iframe加载完毕以后执行操作
+            that.firstShow = true
+            // console.log('iframe已加载完毕');
+            that.endLoading('screen')
+          })
+        } else {
+          iframe.onload = function () {
+            // iframe加载完毕以后执行操作
+            that.firstShow = true
+            // console.log('iframe已加载完毕');
+            that.endLoading('screen')
+          }
+        }
+
+        iframe.src = this.data.param.url
+      })
+    },
+    setStaticContentFull: function () {
+      const that = this
+      this.$nextTick(() => {
+        const staticDiv = document.querySelector('#staticContainerFull' + this.chartIndex)
+        staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
+        that.firstShow = true
+        that.endLoading('screen')
+      })
+    }
+  },
+  watch: {
+    dropdownMenuShow (n) {
+      this.$emit('dropmenu-change', n)
+    }
+  },
+  mounted () {
+    this.firstLoad = false
+  },
+  beforeDestroy () {
+    this.clearChart()
+  }
+}
+</script>
+<style>
+  .center-content .content-static-url{
+    font-weight: bold;
+    font-size: 24px;
+  }
+  .center-content .content-static-tip{
+    font-size: 18px;
+    color: lightgrey;
+  }
+  .resize-box-group{
+    position: unset !important;
+  }
+</style>
--- a/nezha-fronted/src/components/charts/chart-list-group.vue
+++ b/nezha-fronted/src/components/charts/chart-list-group.vue
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -170,6 +170,21 @@
                            :panel-id="filter.panelId"
                            @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
                            :chart-index="index"></chart-pie>
+        <chart-group  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'group'"
+                      @on-refresh-data="refreshChart"
+                      @on-search-data="searchData"
+                      @on-remove-chart-block="removeChart"
+                      @on-duplicate-chart-block="duplicateChart"
+                      @on-drag-chart="editChartForDrag"
+                      :is-lock="panelLock"
+                      :panelLock="panelLock"
+                      :filter="filter"
+                      @on-edit-chart-block="editData"
+                      :panel-id="filter.panelId"
+                      :chart-data="item"
+                      :dataList='dataList'
+                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+                      :chart-index="index"></chart-group>
      </div>
   </draggable>
    <el-row v-if="dataList.length === 0"  class="noData"></el-row>
@@ -190,6 +205,7 @@ import chartDataFormat from './chartDataFormat'
 import chartAlertList from './chart-alert-list'
 import textChart from './text-chart'
 import chartPie from './chart-pie'
+import chartGroup from './chart-group'
 // import visNetwork from './visNetwork'
 export default {
  name: 'chartList',
@@ -199,7 +215,8 @@ export default {
    draggable: { type: Boolean, default: true },
    detail: Object,
    from: { type: String },
-    panelLock: { type: Boolean, default: false }
+    panelLock: { type: Boolean, default: false },
+    hasGroup: { type: Boolean, default: true }
  },

  components: {
@@ -211,7 +228,8 @@ export default {
    chartSingleStat,
    draggable,
    textChart,
-    chartPie
+    chartPie,
+    chartGroup
    // visNetwork,
  },
  data () {
@@ -573,7 +591,7 @@ export default {
      }
      if (!param.query) delete param.query
      // 根据panelId获得panel下的所有图表
-      this.$get('panel/' + params.panelId + '/charts').then(response => {
+      this.$get('visual/panel/chart?id=' + params.panelId).then(response => {
        if (response.code === 200) {
          response.data.list.forEach((item, index) => {
            item.isLoaded = false
@@ -600,6 +618,28 @@ export default {
          this.dataTotalList = [...chartListTmp]

          this.dataList = [...this.dataTotalList]
+          console.log(this.dataList)
+          // this.dataList.push({
+          //   ...this.dataList[0],
+          //   group: {
+          //     id: 1,
+          //     name: 'chart group'
+          //   },
+          //   type: 'group',
+          //   span: 12,
+          //   height: 600,
+          //   id: 999999,
+          //   children: [...this.dataList]
+          // })
+          let addGroupIndex = 0
+          this.dataList.forEach((item) => {
+            if (item.type === 'group') {
+              item.children.forEach(chart => {
+                addGroupIndex++
+                chart.chartIndex = this.dataList.length + addGroupIndex
+              })
+            }
+          })
          // this.showShadow=false;
          this.$nextTick(() => {
            if (this.dataList.length > 0) {
@@ -721,6 +761,9 @@ export default {
    // 获取一个图表具体数据,图表信息，图表位置index
    getChartData (chartInfo, pos, filterType) {
      const chartItem = chartInfo
+      if (chartItem.type === 'group') {
+        return
+      }
      if (chartItem.type === 'assetInfo') {
        if (chartItem.from != this.$CONSTANTS.fromRoute.endpoint) {
          this.$set(chartItem, 'draggable', true)
@@ -938,6 +981,7 @@ export default {
                              host = chartItem.elements[innerPos].expression
                            }
                            // 处理legend别名
+                            console.log(chartItem.id)
                            let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend)
                            if (!alias || alias === '') {
                              alias = host
@@ -1497,6 +1541,9 @@ export default {
        if (chartBox) {
          chartBox.style.width = `${(item.span / 12) * 100}%`
          chartBox.style.height = `${item.height}px`
+          if (item.type === 'group') {
+            chartBox.style.height = 'auto'
+          }
        }
      })
    },
--- a/nezha-fronted/src/components/charts/text-chart.vue
+++ b/nezha-fronted/src/components/charts/text-chart.vue
@@ -208,6 +208,7 @@ export default {
    },
    // 设置数据, filter区分
    setData (chartItem, seriesItem, panelId, filter, area) {
+      console.log(chartItem);
      this.$nextTick(() => {
        this.resize(chartItem)
      })
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -349,6 +349,7 @@ export const chartResizeTool = {
    return height - this.chartBlankHeight
  },
  start (vm, originalData, event, chartIndexs) {
+    console.log(vm, originalData, event, chartIndexs)
    const $self = this
    const data = JSON.parse(JSON.stringify(originalData)) // 将初始对象复制，后续操作使用复制对象
    let shadow = vm.$refs.resizeShadow // 缩放时底部阴影dom
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -221,6 +221,9 @@ const cn = {
          },
          text: {
            label: '文本'
+          },
+          group: {
+            label: '组'
          }
        },
        statisticsVal: {
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -234,6 +234,9 @@ const en = {
          },
          text: {
            label: 'Text'
+          },
+          group: {
+            label: 'group'
          }
        },
        statisticsVal: {
--- a/nezha-fronted/src/components/common/multipleTime.vue
+++ b/nezha-fronted/src/components/common/multipleTime.vue
@@ -313,7 +313,7 @@ export default {
    }
  },
  mounted () {
-    console.log(this.searchTime, 'this.searchTime')
+    // console.log(this.searchTime, 'this.searchTime')
  },
  methods: {
    dateChange (val) {
--- a/nezha-fronted/src/components/common/popBox/selectPanel.vue
+++ b/nezha-fronted/src/components/common/popBox/selectPanel.vue
@@ -115,7 +115,7 @@ export default {
        })
      }

-      this.$put('/panel/tree', toUpdate)
+      this.$put('visual/panel/tree', toUpdate)
    },
    deletePanel (data) {
      this.$emit('deletePanel', data)
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -69,7 +69,7 @@ export default {
        cancelButtonText: this.$t('tip.no'),
        type: 'warning'
      }).then(() => {
-        this.$delete('panel?ids=' + u.id).then(response => {
+        this.$delete('visual/panel?ids=' + u.id).then(response => {
          if (response.code === 200) {
            this.esc()
            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
@@ -85,7 +85,7 @@ export default {
        if (valid) {
          this.prevent_opt.save = true
          if (this.panel.id) {
-            this.$put('panel', this.panel).then(response => {
+            this.$put('visual/panel', this.panel).then(response => {
              if (response.code === 200) {
                this.esc()
                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -96,7 +96,7 @@ export default {
              this.prevent_opt.save = false
            })
          } else {
-            this.$post('panel', this.panel).then(response => {
+            this.$post('visual/panel', this.panel).then(response => {
              if (response.code === 200) {
                this.esc()
                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
--- a/nezha-fronted/src/components/common/rightBox/roleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/roleBox.vue
@@ -142,7 +142,6 @@ export default {
      this.$get('sys/menu').then(response => {
        if (response.code == 200) {
          this.menus = response.data.list
-
        } else {
          this.$message.error('load menu faild')
        }
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -183,7 +183,7 @@

          </el-form-item>
          <el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
-            <el-input maxlength="64" show-word-limit size="small" v-model="editChart.title" id="chart-box-title"></el-input>
+            <el-input maxlength="64" show-word-limit size="small" v-model="editChart.name" id="chart-box-title"></el-input>
          </el-form-item>

          <div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.option')}}</div>
@@ -198,6 +198,15 @@
            </el-select>
          </el-form-item>

+          <!--group-->
+          <el-form-item :label="$t('dashboard.panel.chartForm.group')" class="half-form-item" prop="type">
+            <el-select @change="chartTypeChange" class="right-box-row-with-btn" placeholder="" popper-class="chart-box-dropdown-small" size="mini" v-model="editChart.type" value-key="chartType" id="chart-box-group">
+              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTypeList">
+                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+
          <el-form-item :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit" v-show="editChart.type !='text' && editChart.type !=='url'">
            <el-cascader :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" @change="unitSelected"  filterable id="chart-box-unit"
                         placeholder=""
@@ -260,9 +269,9 @@
            <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" class="exporter-switch" v-model="editChart.param.last" id="chart-box-last"></el-switch>
          </el-form-item>-->

-          <!--<el-form-item :label="$t('dashboard.panel.chartForm.sync')" v-if="showPanel.type && showPanel.type == 'model'">-->
-          <!--<el-switch class="exporter-switch" v-model="editChart.sync" active-color="#ee9d3f" :active-value="1" :inactive-value="0"></el-switch>-->
-          <!--</el-form-item>-->
+          <el-form-item :label="$t('dashboard.panel.chartForm.remark')">
+           <el-input type="textarea" v-model="editChart.remark"/>
+          </el-form-item>

          <div class="right-box-sub-title" style="margin-bottom: 20px" v-if="!isUrl&&!isAlert&& editChart.type != 'text'">
            <span>{{$t('alert.config.expr')}}</span>
@@ -498,7 +507,7 @@ export default {
        panelName: [
          { required: true, message: this.$t('validate.required'), trigger: 'change' }
        ],
-        title: [
+        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        url: [
@@ -511,6 +520,7 @@ export default {
          { required: true, message: this.$t('validate.required'), trigger: 'change' }
        ]
      },
+      groupArr: [],
      chartTypeList: [
        {
          id: 'line',
@@ -547,6 +557,10 @@ export default {
        {
          id: 'url',
          name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
+        },
+        {
+          id: 'group',
+          name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
        }

      ],
@@ -634,7 +648,7 @@ export default {
        cancelButtonText: this.$t('tip.no'),
        type: 'warning'
      }).then(() => {
-        this.$delete('panel?ids=' + panel.id).then(response => {
+        this.$delete('visual/panel?ids=' + panel.id).then(response => {
          if (response.code === 200) {
            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
            if (this.panelId == panel.id) {
@@ -701,7 +715,7 @@ export default {
      this.$refs.chartForm.validate((valid) => {
        if (valid) {
          if (this.editChart.id) { // 修改
-            this.$put('panel/' + this.editChart.id + '/charts').then(response => {
+            this.$put('visual/panel/chart', this.editChart).then(response => {
              if (response.code === 200) {
                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.esc(true)
@@ -710,7 +724,7 @@ export default {
              }
            })
          } else { // 新增
-            this.$post('panel/charts', this.editChart).then(response => {
+            this.$post('visual/panel/chart', this.editChart).then(response => {
              if (response.code === 200) {
                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.esc(true)
@@ -850,12 +864,18 @@ export default {

      // panelPromise.then(()=>{
      if (this.panelId) {
-        this.$post('panel/' + this.panelId + '/charts', params || this.editChart).then(response => {
+        const chartParams = params || this.editChart
+        chartParams.panelId = this.panelId
+        if (!chartParams.groupId) {
+          chartParams.groupId = -1
+        }
+        delete chartParams.panel
+        this.$post('visual/panel/chart', chartParams).then(response => {
          if (response.code === 200) {
            this.esc()
            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
            this.$refs.chartForm.resetFields()// 清空表单
-            this.$emit('on-create-success', 'create', response.data, params, { id: this.panelId, name: this.panelName })
+            this.$emit('on-create-success', 'create', response.data, chartParams, { id: this.panelId, name: this.panelName })
          } else {
            if (response.msg) {
              this.$message.error(response.msg)
@@ -871,12 +891,18 @@ export default {
    // 更新图表
    updateCharts (params) {
      const panelId = this.panelId ? this.panelId : this.chart.panelId
-      this.$put('panel/' + panelId + '/charts', params || this.editChart).then(response2 => {
+      const chartParams = params || this.editChart
+      chartParams.panelId = panelId
+      if (!chartParams.groupId) {
+        chartParams.groupId = -1
+      }
+      delete chartParams.panel
+      this.$put('visual/panel/chart', chartParams).then(response2 => {
        if (response2.code === 200) {
          this.esc()
          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
          // this.$refs.chartForm.resetFields();//清空表单
-          this.$emit('on-create-success', 'update', response2.data, params)
+          this.$emit('on-create-success', 'update', response2.data, chartParams)
        } else {
          if (response2.msg) {
            this.$message.error(response2.msg)
@@ -895,7 +921,7 @@ export default {
          const params = {
            // productId: this.productId,
            // panelId: this.panelId,
-            title: this.editChart.title, // this.editChart
+            name: this.editChart.name, // this.editChart
            span: this.editChart.span,
            height: this.editChart.height,
            type: this.editChart.type,
@@ -960,13 +986,14 @@ export default {
    getAlertParam: function (param, opType) {
      this.$refs.chartForm.validate((valid) => {
        const params = {
-          title: this.editChart.title, // this.editChart
+          name: this.editChart.name, // this.editChart
          span: this.editChart.span,
          height: this.editChart.height,
          type: this.editChart.type,
          unit: this.editChart.unit,
          param: param,
-          sync: this.editChart.sync
+          sync: this.editChart.sync,
+          remark: this.editChart.remark
        }
        if (valid) {
          if (opType === 'preview') {
@@ -1025,7 +1052,7 @@ export default {
        if (this.editChart.type == 'url') {
          this.$refs.chartForm.validate((valid) => {
            const params = {
-              title: this.editChart.title, // this.editChart
+              name: this.editChart.name, // this.editChart
              span: this.editChart.span,
              height: this.editChart.height,
              type: this.editChart.type,
@@ -1033,7 +1060,8 @@ export default {
              param: {
                url: this.editChart.param.url
              },
-              sync: this.editChart.sync
+              sync: this.editChart.sync,
+              remark: this.editChart.remark
            }

            if (valid) {
@@ -1053,14 +1081,15 @@ export default {
              valid = false
            }
            const params = {
-              title: this.editChart.title, // this.editChart
+              name: this.editChart.name, // this.editChart
              span: this.editChart.span,
              height: this.editChart.height,
              type: this.editChart.type,
              param: {
                text: text
              },
-              sync: this.editChart.sync
+              sync: this.editChart.sync,
+              remark: this.editChart.remark
            }

            if (valid) {
@@ -1193,11 +1222,12 @@ export default {
      this.editInfo = data
      // 图表信息获取
      this.editChart.id = data.id
-      this.editChart.title = data.title
+      this.editChart.name = data.name
      this.editChart.span = data.span
      this.editChart.height = data.height + ''
      this.editChart.type = data.type
      this.editChart.unit = data.unit
+      this.editChart.remark = data.remark
      this.editChart.elements = data.elements
      if (this.editChart.type === 'url') {
        this.editChart.param.url = data.param.url
@@ -1252,11 +1282,13 @@ export default {

    // 初始化信息
    initInfo (unit) {
-      this.editChart.title = ''
+      this.editChart.name = ''
      this.editChart.type = 'line'
      this.editChart.span = 12
      this.editChart.height = 400 + ''
      this.editChart.unit = unit || 2
+      this.editChart.remark = ''
+      this.editChart.groupId = ''
      const param = {}
      param.last = 0
      param.url = ''
@@ -1394,13 +1426,15 @@ export default {
            const params = {
              // productId: this.productId,
              // panelId: this.panelId,
-              title: this.editChart.title, // this.editChart
+              name: this.editChart.name, // this.editChart
              span: this.editChart.span,
              height: this.editChart.height,
              type: this.editChart.type,
              unit: this.editChart.unit,
              param: this.editChart.param,
-              sync: this.editChart.sync
+              sync: this.editChart.sync,
+              remark: this.editChart.remark,
+              groupId: this.editChart.groupId
            }
            if (this.editChart.type === 'singleStat' || this.editChart.type === 'table') {
              // params.param.statistics=this.statistics;
@@ -1439,14 +1473,16 @@ export default {
      } else if (this.editChart.type == 'url') {
        this.$refs.chartForm.validate((valid) => {
          const params = {
-            title: this.editChart.title, // this.editChart
+            name: this.editChart.name, // this.editChart
            span: this.editChart.span,
            height: this.editChart.height,
            type: this.editChart.type,
            unit: this.editChart.unit,
            param: {
              url: this.editChart.param.url
-            }
+            },
+            remark: this.editChart.remark,
+            groupId: this.editChart.groupId
          }

          if (valid) {
@@ -1463,14 +1499,16 @@ export default {
            valid = false
          }
          const params = {
-            title: this.editChart.title, // this.editChart
+            name: this.editChart.name, // this.editChart
            span: this.editChart.span,
            height: this.editChart.height,
            type: this.editChart.type,
            unit: this.editChart.unit,
            param: {
              text: text
-            }
+            },
+            remark: this.editChart.remark,
+            groupId: this.editChart.groupId
          }

          if (valid) {
@@ -1626,10 +1664,14 @@ export default {
          })
        }

-        if (n.title) {
+        if (n.name) {
          this.isEdit = true
        }
+
        this.editChart = JSON.parse(JSON.stringify(n))
+        if (!n.groupId || n.groupId == -1) {
+          this.editChart.groupId = ''
+        }
        if (!n.param.nullType) {
          this.editChart.param.nullType = 'connected'
        }
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -238,7 +238,7 @@ export default {
        cancelButtonText: this.$t('tip.no'),
        type: 'warning'
      }).then(() => {
-        this.$delete('panel?ids=' + u.id).then(response => {
+        this.$delete('visual/panel?ids=' + u.id).then(response => {
          if (response.code === 200) {
            this.$message({
              duration: 1000,
@@ -317,7 +317,7 @@ export default {
        cancelButtonText: this.$t('tip.no'),
        type: 'warning'
      }).then(() => {
-        this.$delete('panel/' + data.panelId + '/charts?ids=' + data.id).then(response => {
+        this.$delete('visual/panel/chart?ids=' + data.id).then(response => {
          if (response.code === 200) {
            this.$message({
              duration: 2000,
@@ -434,7 +434,7 @@ export default {
      if (!this.hasButton('panel_view')) {
        return
      }
-      this.$get('panel').then(response => {
+      this.$get('visual/panel?pageSize=-1').then(response => {
        if (response.code === 200) {
          this.panelData = response.data.list
          for (let i = 0; i < this.panelData.length; i++) {
@@ -450,7 +450,7 @@ export default {
    getTableData (clearShowPanel) {
      const vm = this

-      this.$get('panel?type=dashboard').then(response => {
+      this.$get('visual/panel?type=dashboard&pageSize=-1').then(response => {
        if (response.code === 200) {
          this.panelData = response.data.list
          let isInitData = false
--- a/nezha-fronted/static/config.json
+++ b/nezha-fronted/static/config.json
@@ -1 +1 @@
-{"baseUrl":"", "version": "1.2.2020.11.10.14.10"}
+{"baseUrl":"http://192.168.40.42:8080/nz-admin/", "version": "1.2.2020.11.10.14.10"}