feat:chart添加group

nezha-fronted/src/components/charts/chart-alert-list.vue

@@ -23,7 +23,7 @@
           <el-dropdown trigger="click" v-show="!isPreview" 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">{{chartInfo.title}}</span>
+              <span class="chart-title-text">{{chartInfo.name}}</span>
               <span class="chart-title-icon" v-if="data.editable"><i class="nz-icon nz-icon-xialaxuanze  "  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
             </span>
             <ul slot="dropdown" v-show="dropdownMenuShow" v-if="data.editable" :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;" >
@@ -60,7 +60,7 @@
         <!--全屏-->
         <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenDialogClose" >
           <div slot="title">
-            <span class="nz-dialog-title">{{data.title}}</span>
+            <span class="nz-dialog-title">{{data.name}}</span>
             <div class="float-right panel-calendar dialog-tool">
               <pick-time :refresh-data-func="dateChange" v-model="searchTime" :show-time-picker="false" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="alert-chart"></pick-time>
             </div>

nezha-fronted/src/components/charts/chart-detail.vue

@@ -20,7 +20,7 @@
               <span class="panel-info-corner-inner"></span>
             </span>
           </el-popover>
-          <span :class="{'move-able':!isLock}"><span class="el-dropdown-link chart-title-text chart-title" @click="dropdownMenuShow = !dropdownMenuShow">{{data.title}}</span></span>
+          <span :class="{'move-able':!isLock}"><span class="el-dropdown-link chart-title-text chart-title" @click="dropdownMenuShow = !dropdownMenuShow">{{data.name}}</span></span>
 
         </div>
         <div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>

nezha-fronted/src/components/charts/chart-group.vue

@@ -11,7 +11,7 @@
           <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-text">{{chartData.name}}</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;" >
@@ -30,7 +30,7 @@
 
         </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>
+          <chart-list-group :groupList.sync="chartData.children" :panel-lock="panelLock" :filterParent="filter"  :class="{'show-top':false}" :hasGroup="false" :from="from" ref="listGroup" :panelId="panelId" @on-edit-group-chart="editGroupItem" @on-remove-chart="removeChartGroup" @moveGroupItem="moveGroupItem"></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>
@@ -104,6 +104,9 @@ export default {
       const chartBox = document.getElementById('chartUrlDiv' + this.chartIndex)
       chartBox.querySelector('.url-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
     },
+    setData (chartItem) {
+      this.data = chartItem
+    },
     showLoad (chartItem) {
       this.data = chartItem
       this.panelIdInner = this.panelId
@@ -196,11 +199,18 @@ export default {
       this.dropdownMenuShow = false
       this.$emit('on-edit-chart-block', this.data.id)
     },
+    editGroupItem (chart) {
+      this.$emit('on-edit-group-chart', chart)
+    },
     // 删除该图表
     removeChart () {
       this.dropdownMenuShow = false
       this.$emit('on-remove-chart-block', this.data.id)
     },
+    // 删除该图表
+    removeChartGroup (chart) {
+      this.$emit('on-remove-group-chart', chart)
+    },
     clickos () {
       this.dropdownMenuShow = false
     },
@@ -237,6 +247,9 @@ export default {
         })
       })
     },
+    moveGroupItem (groupList) {
+      this.$emit('moveGroupItem', { groupId: this.data.id, children: groupList })
+    },
     setLoadFrameFull () {
       const that = this
       this.$nextTick(() => {

nezha-fronted/src/components/charts/chart-list-group.vue

@@ -57,7 +57,7 @@
                  dragClass:'drag-chart-class',
                  fallbackClass:'fallback-class',
                  forceFallback:true,
-                 ghostClass:'chart-group-ghost',
+                 ghostClass:'chart-ghost',
                  chosenClass:'choose-class',
                  scroll:true,
                  filter: '.drag-disabled',
@@ -66,7 +66,7 @@
                  handle: '.chart-title'
                }"
     style="width: 100%;height: 100%">
-      <div :class="{'drag-disabled': !draggable,'chartBox':true}" :id="'chart-group-' + item.id" :key="item.id" :name="item.title" :ref="'chart' + item.id" :style="{marginBottom: extraMarginBottom}" v-for="(item, index) in dataList" v-show="!item.isHide">
+      <div :class="{'drag-disabled': !draggable,'chartBox':true}" :id="'chart-' + item.id" :key="item.id" :name="item.title" :ref="'chart' + item.id" :style="{marginBottom: extraMarginBottom}" v-for="(item, index) in dataList" v-show="!item.isHide">
         <line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
                           :from="from" :ref="'editChart'+item.id" :temp-dom="tempDom"
                           @on-refresh-data="refreshChart"
@@ -220,14 +220,15 @@ export default {
   },
   watch: {
     groupList: {
+      immediate: true,
       handler (n) {
         this.dataList = [...n]
-        console.log(this.dataList)
+        this.$nextTick(() => {
-        this.$nextTick(()=>{
           this.dataList.forEach((item, index) => {
             if (item.type === 'text') {
               console.log(item)
             }
+            console.log(item, index, this.filter)
             this.getChartData(item, index, this.filter)
             this.setChartSize(item, index)
           })
@@ -303,12 +304,7 @@ export default {
     },
     end (event) {
       if (event.oldIndex !== event.newIndex) {
-        const newWeights = []
+        this.$emit('moveGroupItem', this.dataList)
-        this.dataList.forEach((item, index) => {
-          item.weight = index
-          newWeights.push({ id: item.id, weight: index })
-        })
-        this.$put('panel/' + this.pagePanelId + '/charts/weights', newWeights)
         // 处理所有group数据后 调用上层移动 保存
       }
     },
@@ -430,7 +426,7 @@ export default {
             this.setChartSize(item.span, index)// 设置该图表宽度
             if (!item.isLoaded) {
               // 获得当前显示在浏览器的图表，从后台获取数据
-              const chartBox = document.getElementById('chart-group-' + item.id)// this.$refs['editChart'+item.id][0];
+              const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
               this.handleElementInViewport(chartBox, 0, item, index, true)
             }
           })
@@ -536,7 +532,7 @@ export default {
           this.dataList.forEach((item, index) => {
             this.$set(item, 'from', params.from)
             this.setChartSize(item, index)// 设置该图表宽度
-            const chartBox = document.getElementById('chart-group-' + item.id)
+            const chartBox = document.getElementById('chart-' + item.id)
             this.handleElementInViewport(chartBox, 0, item, index)
           })
         })
@@ -595,7 +591,7 @@ export default {
           this.dataList.forEach((item, index) => {
             this.$set(item, 'from', params.from)
             this.setChartSize(item, index)// 设置该图表宽度
-            const chartBox = document.getElementById('chart-group-' + item.id)
+            const chartBox = document.getElementById('chart-' + item.id)
             this.handleElementInViewport(chartBox, 0, item, index)
           })
         })
@@ -665,7 +661,7 @@ export default {
                 }
                 if (!item.isLoaded) {
                   // 获得当前显示在浏览器的图表，从后台获取数据
-                  const chartBox = document.getElementById('chart-group-' + item.id)
+                  const chartBox = document.getElementById('chart-' + item.id)
                   this.handleElementInViewport(chartBox, 0, item, index)
                 }
               })
@@ -679,7 +675,7 @@ export default {
         this.dataList.forEach((item, index) => {
           if (!item.isLoaded) {
             // 获得当前显示在浏览器的图表，从后台获取数据
-            const chartBox = document.getElementById('chart-group-' + item.id)// this.$refs['editChart'+item.id][0];
+            const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
             this.handleElementInViewport(chartBox, scrollTop, item, index)
           }
         })
@@ -1536,7 +1532,7 @@ export default {
     // 设置图表的尺寸
     setChartSize (item, index) {
       this.$nextTick(() => {
-        const chartBox = document.getElementById('chart-group-' + item.id)
+        const chartBox = document.getElementById('chart-' + item.id)
         if (chartBox) {
           chartBox.style.width = `${(item.span / 12) * 100}%`
           chartBox.style.height = `${item.height}px`
@@ -1639,8 +1635,9 @@ export default {
     editData (chartId) {
       // 获取该id下chart的相关信息
       const chart = this.dataList.find(item => item.id === chartId)
+      console.log(chart)
       if (chart) {
-        this.$emit('on-edit-chart', chart)
+        this.$emit('on-edit-group-chart', chart)
       }
     },
 

nezha-fronted/src/components/charts/chart-list.vue

@@ -180,6 +180,9 @@
                       :panelLock="panelLock"
                       :filter="filter"
                       @on-edit-chart-block="editData"
+                      @on-edit-group-chart="editDataGroup"
+                      @on-remove-group-chart="removeChartGroup"
+                      @moveGroupItem="moveGroupItem"
                       :panel-id="filter.panelId"
                       :chart-data="item"
                       :dataList='dataList'
@@ -293,13 +296,42 @@ export default {
     end (event) {
       if (event.oldIndex !== event.newIndex) {
         const newWeights = []
+        let i = 0
         this.dataList.forEach((item, index) => {
           item.weight = index
           newWeights.push({ id: item.id, weight: index })
+          if (item.type === 'group') {
+            item.children.forEach(chart => {
+              i++
+              newWeights.push({ id: chart.id, groupId: item.id, weight: this.dataList.length + i })
+            })
+          }
         })
-        this.$put('panel/' + this.pagePanelId + '/charts/weights', newWeights)
+        const panelId = this.pagePanelId
+        this.$put('/visual/panel/chart/weights', { panelId, charts: newWeights })
       }
     },
+    moveGroupItem (group) {
+      const newWeights = []
+      let i = 0
+      this.dataList.forEach((item, index) => {
+        item.weight = index
+        newWeights.push({ id: item.id, weight: index })
+        if (item.type === 'group' && group.groupId!==item.id) {
+          item.children.forEach(chart => {
+            i++
+            newWeights.push({ id: chart.id, groupId: item.id, weight: this.dataList.length + i })
+          })
+        } else if (item.type === 'group' && group.groupId == item.id){
+          group.children.forEach(chart => {
+            i++
+            newWeights.push({ id: chart.id, groupId: item.id, weight: this.dataList.length + i })
+          })
+        }
+      })
+      const panelId = this.pagePanelId
+      this.$put('/visual/panel/chart/weights', { panelId, charts: newWeights })
+    },
     move (event, orgin) {
       const dragClass = document.querySelector('.drag-chart-class')// drag-chart-class:yellow chart-ghost:green  fallback-class choose-class:purple
 
@@ -591,12 +623,19 @@ export default {
       }
       if (!param.query) delete param.query
       // 根据panelId获得panel下的所有图表
-      this.$get('visual/panel/chart?id=' + params.panelId).then(response => {
+      this.$get('visual/panel/chart?panelId=' + params.panelId).then(response => {
         if (response.code === 200) {
           response.data.list.forEach((item, index) => {
             item.isLoaded = false
           })
 
+          response.data.list.forEach((item, index) => { // 把chart放入对应的group
+            if (item.type === 'group') {
+              item.children = response.data.list.filter(item1 => item1.groupId === item.id)
+            }
+          })
+          response.data.list = response.data.list.filter((item) => item.groupId === -1 || !item.groupId) // 处理外层存在的groupItem
+          console.log(response.data.list)
           if (response.data.list) {
             this.dataTotalListBak = response.data.list
           } else {
@@ -762,6 +801,7 @@ export default {
     getChartData (chartInfo, pos, filterType) {
       const chartItem = chartInfo
       if (chartItem.type === 'group') {
+        this.$refs['editChart' + chartItem.id][0].setData(chartItem)
         return
       }
       if (chartItem.type === 'assetInfo') {
@@ -1559,6 +1599,12 @@ export default {
         this.$emit('on-remove-chart', chart)
       }
     },
+    // 删除图表
+    removeChartGroup (chart) { // from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
+      if (chart) {
+        this.$emit('on-remove-chart', chart)
+      }
+    },
     // 复制图表
     duplicateChart (chartId, duplicateChartBack) {
       const duplicateChartId = duplicateChartBack.id
@@ -1642,12 +1688,19 @@ export default {
     // 编辑图表
     editData (chartId) {
       // 获取该id下chart的相关信息
-      const chart = this.dataList.find(item => item.id === chartId)
+      const chart = this.dataList.find(item => {
+        return item.id === chartId
+      })
+      if (chart) {
+        this.$emit('on-edit-chart', chart)
+      }
+    },
+    // 编辑 group下的图表
+    editDataGroup (chart) {
       if (chart) {
         this.$emit('on-edit-chart', chart)
       }
     },
-
     editChartForDrag (chartItem) {
       const chart = this.dataList.find(item => item.id === chartItem.id)
       chart.span = chartItem.span

nezha-fronted/src/components/charts/chart-pie.vue

@@ -23,7 +23,7 @@
           <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-text">{{chartData.name}}</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;" >
@@ -52,7 +52,7 @@
                    :visible.sync="screenModal"
                    width="96%"  @close="screenModal = false" :modal-append-to-body="false">
           <div slot="title">
-            <span class="nz-dialog-title">{{data.title}}</span>
+            <span class="nz-dialog-title">{{data.name}}</span>
             <div class="float-right panel-calendar dialog-tool">
 <!--              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>-->
               <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="single-chart"></pick-time>
@@ -423,10 +423,10 @@ export default {
             const boxWidth = size.contentSize[0]
             const boxHeight = size.contentSize[1]
             if (!self.screenModal) { // 本地显示
-              const chartDom = document.getElementById(self.chartData.title + '_' + self.chartData.id)
+              const chartDom = document.getElementById(self.chartData.name + '_' + self.chartData.id)
               if (chartDom) {
                 // const parTop = document.getElementById(self.chartData.title + '_' + self.chartData.id).offsetTop
-                const parleft = document.getElementById(self.chartData.title + '_' + self.chartData.id).offsetLeft
+                const parleft = document.getElementById(self.chartData.name + '_' + self.chartData.id).offsetLeft
 
                 const parent = document.getElementById('tableList')
                 // const parClientHeight = parent.clientHeight// 可视高度

nezha-fronted/src/components/charts/chart-single-stat.vue

@@ -23,7 +23,7 @@
           <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-text">{{chartData.name}}</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;" >
@@ -51,7 +51,7 @@
                    :visible.sync="screenModal"
                    width="96%"  @close="screenModal = false" >
           <div slot="title">
-            <span class="nz-dialog-title">{{data.title}}</span>
+            <span class="nz-dialog-title">{{data.name}}</span>
             <div class="float-right panel-calendar dialog-tool">
 <!--              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>-->
               <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="single-chart"></pick-time>

nezha-fronted/src/components/charts/chart-table.vue

@@ -24,7 +24,7 @@
           <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-text">{{chartData.name}}</span>
               <span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze  "
                                                 :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
             </span>
@@ -78,7 +78,7 @@
         <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal"
                    width="96%" @close="screenModal = false">
           <div slot="title">
-            <span class="nz-dialog-title">{{data.title}}</span>
+            <span class="nz-dialog-title">{{data.name}}</span>
             <div class="float-right panel-calendar dialog-tool">
 <!--              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"-->
 <!--                           @change="dateChange"></time-picker>-->

nezha-fronted/src/components/charts/chart-url.vue

@@ -11,7 +11,7 @@
           <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-text">{{chartData.name}}</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;" >
@@ -40,7 +40,7 @@
         <!--全屏-->
         <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%" @opened="initDialog"  @close="screenModal = false" >
           <div slot="title">
-            <span class="nz-dialog-title">{{chartData.title}}</span>
+            <span class="nz-dialog-title">{{chartData.name}}</span>
           </div>
           <iframe :id="'urlContainerFull'+chartIndex"  frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto v-if="!showStatic"
                   style="z-index:5000;padding-bottom:6px;"

nezha-fronted/src/components/charts/chartPreview.vue

@@ -54,7 +54,7 @@
           </span>
       </el-popover>
       <div slot="title" class="chart-title">
-        <span class="nz-dialog-title chart-title-text">{{chart.title}}</span>
+        <span class="nz-dialog-title chart-title-text">{{chart.name}}</span>
         <div class="float-right panel-calendar dialog-tool"  v-if="chart.type!=='url' && chart.type !=='alertList'">
 
 <!--          <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange" v-if="chart.type !='text'"></time-picker>-->
@@ -473,7 +473,7 @@ export default {
                         }
                         if (chartItem.type === 'stackArea') {
                           seriesItem.theData.type = 'line'
-                          seriesItem.theData.stack = chartItem.title
+                          seriesItem.theData.stack = chartItem.name
                           seriesItem.theData.areaStyle = { opacity: 0.3 }
                         }
                         if (chartItem.type === 'endpointInfo') {
@@ -1411,7 +1411,7 @@ export default {
                     }
                     if (this.chart.type === 'stackArea') {
                       seriesItem.theData.type = 'line'
-                      seriesItem.theData.stack = this.chart.title
+                      seriesItem.theData.stack = this.chart.name
                       seriesItem.theData.areaStyle = { opacity: 0.3 }
                     }
                     // 图表中每条线的名字,后半部分

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -37,7 +37,7 @@
           <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-text">{{chartData.name}}</span>
               <span class="chart-title-icon" v-if="filter.from != $CONSTANTS.fromRoute.rule&&chartTitleShow"><i :class="{'visible':caretShow,'hidden':!caretShow}" class="nz-icon nz-icon-xialaxuanze  "></i></span>
             </span>
             <ul :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}" :id="'dropdownUl'+chartIndex" slot="dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" v-if="filter.from != $CONSTANTS.fromRoute.rule&&chartTitleShow"    v-show="dropdownMenuShow" >
@@ -1555,7 +1555,7 @@ export default {
         } else if (type === 'dashboard') { // 概览模式,指标概览中使用
           // 概览模式,需要区分单独一个和多个
           if (this.stableFilter.chartCount === 'multiple') {
-            let query = encodeURIComponent(this.data.title)
+            let query = encodeURIComponent(this.data.name)
             if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
               this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
               query += '&nullType=' + this.chartInfo.param.nullType

nezha-fronted/src/components/charts/text-chart.vue

@@ -11,7 +11,7 @@
           <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-text">{{chartData.name}}</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;" >
@@ -40,7 +40,7 @@
                    :visible.sync="screenModal"
                    width="96%"  @close="screenModal = false" >
           <div slot="title">
-            <span class="nz-dialog-title">{{data.title}}</span>
+            <span class="nz-dialog-title">{{data.name}}</span>
           </div>
           <div class="rich-text-screen-container"  >
             <div id="chartScreenContainer"  ref="chartScreenContainer" class="text-content" >

nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue

@@ -31,8 +31,8 @@
         <export-excel
           id="panel-tab"
           export-file-name="chart"
-          export-url="/panel/export"
+          export-url="/visual/panel/export"
-          import-url="/panel/import"
+          import-url="/visual/panel/import"
           :params="filter"
           :from="$CONSTANTS.fromRoute.asset"
           :link="obj"

nezha-fronted/src/components/common/js/tools.js

@@ -402,7 +402,7 @@ export const chartResizeTool = {
       if (data.height != originalData.height || data.span != originalData.span) {
         originalData.height = data.height
         originalData.span = data.span
-        vm.$put('panel/' + vm.panelIdInner + '/charts/modify', originalData)
+        vm.$put('/visual/panel/chart/modify', originalData)
       }
       // 关闭背景阴影
       shadow.classList.remove('resize-shadow-active')

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -199,15 +199,15 @@
           </el-form-item>
 
           <!--group-->
-          <el-form-item :label="$t('dashboard.panel.chartForm.group')" class="half-form-item" prop="type">
+          <el-form-item :label="$t('dashboard.panel.chartForm.group')" class="half-form-item" prop="group" v-if="editChart.type!=='group'">
-            <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-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChart.groupId" value-key="chartType" id="chart-box-group">
-              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTypeList">
+              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in groupArr">
                 <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-form-item :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit" v-show="editChart.type !='text' && editChart.type !=='url'&& editChart.type !=='group'">
             <el-cascader :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" @change="unitSelected"  filterable id="chart-box-unit"
                          placeholder=""
                          popper-class="dc-dropdown"
@@ -220,7 +220,7 @@
           <!--type unit end-->
 
           <el-form-item :label="$t('dashboard.panel.chartForm.width')" class="half-form-item" prop="span">
-            <el-select class="right-box-row-with-btn"  placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.span" value-key="chartSpan" id="chart-box-span">
+            <el-select class="right-box-row-with-btn" :disabled="isGroup"  placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.span" value-key="chartSpan" id="chart-box-span">
               <el-option :key="item" :label="'span-' + item" :value="item" v-for="item in spanList">
                 <span class="panel-dropdown-label-txt" > span-{{item}}</span>
               </el-option>
@@ -232,6 +232,7 @@
               id="chart-box-height"
               :fetch-suggestions="querySearch"
               @select="handleSelect"
+              :disabled="isGroup"
               placeholder=""
               popper-class="popper-z-index no-style-class"
               size="mini"
@@ -273,7 +274,7 @@
            <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'">
+          <div class="right-box-sub-title" style="margin-bottom: 20px" v-if="!isUrl&&!isAlert&& editChart.type != 'text'&& editChart.type != 'group'">
             <span>{{$t('alert.config.expr')}}</span>
             <span @click="addExpression" class="float-right" style="height: 19px;display: inline-block;line-height: 1;" v-if="!isSingleStat">
             <span class="create-square-box">
@@ -291,7 +292,7 @@
             <alert-chart-param @on-enter-complate="getAlertParam" ref="alertParamBox"></alert-chart-param>
           </el-row>
           <div id="chart-box-expression-box" style="margin-bottom: 20px">
-            <el-row :key="'ele' + index" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" v-if="!isUrl &&!isAlert && editChart.type != 'text'">
+            <el-row :key="'ele' + index" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" v-if="!isUrl &&!isAlert && editChart.type != 'text'&& editChart.type != 'group'">
               <promql-input
                 :expression-list="expressions"
                 :id="promqlKeys[index-1]"
@@ -488,7 +489,10 @@ export default {
       optionBtn: {
         save: false
       },
-      editChart: {},
+      editChart: {
+        name: '',
+        remark: ''
+      },
       filterPanel: '',
       statisticsList: this.$CONSTANTS.statisticsList,
 
@@ -503,6 +507,7 @@ export default {
       isUrl: false,
       isSingleStat: false,
       isAlert: false,
+      isGroup: false,
       rules: {
         panelName: [
           { required: true, message: this.$t('validate.required'), trigger: 'change' }
@@ -870,12 +875,20 @@ export default {
           chartParams.groupId = -1
         }
         delete chartParams.panel
+        if (chartParams.type === 'group') {
+          chartParams.elements = [{
+            expression: 'Hadoop_DataNode_BlockChecksumOpNumOps',
+            id: '',
+            legend: '',
+            type: 'expert'
+          }]
+        }
         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.$refs.chartForm.resetFields()// 清空表单
             this.$emit('on-create-success', 'create', response.data, chartParams, { id: this.panelId, name: this.panelName })
+            this.esc()
           } else {
             if (response.msg) {
               this.$message.error(response.msg)
@@ -1195,21 +1208,31 @@ export default {
       this.isUrl = true
       this.isSingleStat = false
       this.isAlert = false
+      this.isGroup = false
     },
     setIsSingleStat () {
       this.isUrl = false
       this.isSingleStat = true
       this.isAlert = false
+      this.isGroup = false
     },
     setIsAlertList () {
       this.isAlert = true
       this.isUrl = false
       this.isSingleStat = false
+      this.isGroup = false
     },
     setIsOtherChart () {
       this.isSingleStat = false
       this.isUrl = false
       this.isAlert = false
+      this.isGroup = false
+    },
+    setIsGroup () {
+      this.isSingleStat = false
+      this.isUrl = false
+      this.isAlert = false
+      this.isGroup = true
     },
     // 编辑chart时使用, set_tdata
     editData (data, panelId) {
@@ -1355,6 +1378,10 @@ export default {
           }
         }
         this.showPicker = [{ bac: false, text: false }]
+      } else if (chartType === 'group') {
+        this.editChart.span = 12
+        this.editChart.height = -1
+        this.setIsGroup()
       } else {
         this.setIsOtherChart()
         if (chartType === 'bar' || chartType === 'line' || chartType === 'stackArea') {
@@ -1669,9 +1696,13 @@ export default {
         }
 
         this.editChart = JSON.parse(JSON.stringify(n))
+        this.editChart.name = this.editChart.name || ''
         if (!n.groupId || n.groupId == -1) {
           this.editChart.groupId = ''
         }
+        if (typeof (this.editChart.param) === 'string') {
+          this.editChart.param = JSON.parse(this.editChart.param)
+        }
         if (!n.param.nullType) {
           this.editChart.param.nullType = 'connected'
         }
@@ -1699,6 +1730,16 @@ export default {
         if (this.showPanel.id) {
           this.panelId = this.showPanel.id
         }
+        this.$get('visual/panel/chart?id= ' + this.panelId).then(response => {
+          if (response.code === 200) {
+            this.groupArr = []
+            response.data.list.forEach((item, index) => {
+              if (item.type === 'group') {
+                this.groupArr.push({ id: item.id, name: item.name })
+              }
+            })
+          }
+        })
         if (n.id) {
           this.editData(this.editChart, this.showPanel.id)
         } else {

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -7,7 +7,7 @@
       <template v-else>
         <div class="top-tool-main-left">
           <select-panel :filter-panel="filterPanel" :panel-data="panelData" :panel-lock="panelLock" :placement="'bottom-start'" :show-panel="showPanel"
-                        @deletePanel="del" @editPanel="edit" @selectPanel="panelChange" ref="selectPanel" style="width: 300px;">
+                        @deletePanel="del" @editPanel="edit" @selectPanel="panelChange" ref="selectPanel" style="width: 300px;display: inline-block">
             <template v-slot:header>
               <div class="panel-select-header">
                 <el-input :placeholder="$t('overall.search')" clearable size="mini" style="width: 340px; margin-right: 5px;" v-model="filterPanel" id="panel-list-search"></el-input>
@@ -74,8 +74,8 @@
           <export-excel
             id="panel"
             export-file-name="chart"
-            export-url="/panel/export"
+            export-url="/visual/panel/export"
-            import-url="/panel/import"
+            import-url="/visual/panel/import"
             :params="filter"
             :permissions="{
               import: 'panel_chart_import',
@@ -149,18 +149,17 @@ export default {
       chart: {},
       blankChart: {
         id: '',
-        title: '',
+        name: '',
         type: 'line',
         span: 12,
         height: '400',
         unit: 2,
-        param: {
+        param: { url: '', threshold: '' },
-          url: '',
-          threshold: ''
-        },
         elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
         panel: '',
-        sync: 0
+        sync: 0,
+        remark: '',
+        groupId: -1
       },
       pageObj: {
         pageNo: 1,
@@ -286,6 +285,7 @@ export default {
     addChart () {
       this.chart = this.newChart()
       this.rightBox.chart.show = true
+      console.log(123123123)
     },
     newChart () {
       return JSON.parse(JSON.stringify(this.blankChart))