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

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>

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'
+          }
         }
       })
     },

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)
       })

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

nezha-fronted/src/components/common/language/cn.js

@@ -221,6 +221,9 @@ const cn = {
           },
           text: {
             label: '文本'
+          },
+          group: {
+            label: '组'
           }
         },
         statisticsVal: {

nezha-fronted/src/components/common/language/en.js

@@ -234,6 +234,9 @@ const en = {
           },
           text: {
             label: 'Text'
+          },
+          group: {
+            label: 'group'
           }
         },
         statisticsVal: {

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) {

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)

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') })

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')
         }

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

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

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"}