feat：添加chartGroup的类型

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

@@ -83,6 +83,15 @@
         :is-fullscreen="isFullscreen"
         :chart-option="chartOption"
       ></chart-diagram>
+      <chart-group
+        :ref="'chart' + chartInfo.id"
+        v-if="isGroup(chartInfo.type)"
+        :panelLock="panelLock"
+        :chart-data="chartData"
+        :chart-info="chartInfo"
+        :is-fullscreen="isFullscreen"
+        :chart-option="chartOption"
+      ></chart-group>
     </template>
   </div>
 </template>
@@ -107,7 +116,7 @@ import chartTreemap from './chart/chartTreemap'
 import chartUrl from './chart/chartUrl'
 import chartValue from './chart/chartValue'
 import chartHexagon from './chart/chartHexagon'
-import { getOption, isTimeSeries, isHexagonFigure, isUrl, isText, isChartPie, isChartBar, isTreemap, isLog, isStat, isDiagram } from './chart/tools'
+import { getOption, isTimeSeries, isHexagonFigure, isUrl, isText, isChartPie, isChartBar, isTreemap, isLog, isStat, isDiagram, isGroup } from './chart/tools'
 import lodash from 'lodash'
 
 export default {
@@ -138,7 +147,8 @@ export default {
     chartData: [Object, Array, String], // 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染
     customChartOption: Object, // 需要自定义echarts的option时传入，非必须；传入该值时仍需传对应格式的chartData
     isFullscreen: Boolean,
-    loading: Boolean
+    loading: Boolean,
+    panelLock: Boolean
   },
   computed: {
     isNoData () {
@@ -163,6 +173,7 @@ export default {
     isLog,
     isStat,
     isDiagram,
+    isGroup,
     resize () {
       this.$refs['chart' + this.chartInfo.id].resize()
     }

nezha-fronted/src/components/chart/chart/chartGroup.vue

@@ -1,29 +1,62 @@
 <template>
-  <chart-list
+  <div style="width: 100%;height: 100%">
+    <chartList
       ref="chartList"
+      name="group"
       :class="{'show-top':showTopBtn}"
       :data-list="dataList"
       :nowTimeType="nowTimeType"
       :from="fromRoute.panel"
       :panel-lock="panelLock"
+      :isGroup="true"
       :time-range="searchTime"
-    @edit-chart="editChart"
       @on-refresh-time="refreshTime"
-    @on-remove-chart="delChart"
-    @on-add-group-item-chart="addGroupItem"
       :loading="chartListLoading"
-  ></chart-list>
+    ></chartList>
+  </div>
 </template>
 
 <script>
-import ChartList from '../../chart/chartList'
+import { fromRoute } from '@/components/common/js/constants'
+import chartMixin from '@/components/chart/chartMixin'
+import chartFormat from '@/components/chart/chartFormat'
 export default {
   name: 'chart-group',
-  components: {
+  props: {
-    'chart-list': ChartList
+    panelLock: Boolean
+  },
+  mixins: [chartMixin, chartFormat],
+  computed: {
+    searchTime () {
+      return this.$store.getters.getTimeRange
+    },
+    nowTimeType () {
+      return this.$store.getters.getNowTimeType
+    }
   },
   data () {
-    showTopBtn: false
+    return {
+      fromRoute,
+      dataList: [],
+      showTopBtn: false,
+      chartListLoading: false
+    }
+  },
+  methods: {
+    refreshTime () {
+
+    }
+  },
+  watch: {
+    chartData: {
+      immediate: true,
+      handler (n) {
+        console.log(n)
+        this.$nextTick(() => {
+          this.dataList = JSON.parse(JSON.stringify(n))
+        })
+      }
+    }
   }
 }
 </script>

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

@@ -79,6 +79,9 @@ export function isStat (type) {
 export function isDiagram (type) {
   return type === chartType.diagram
 }
+export function isGroup (type) {
+  return type === chartType.group
+}
 
 export function initColor (colorNum = 20) {
   const colorList = [

nezha-fronted/src/components/chart/chartList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id='`chartList${timestamp}`' class="chart-list" :loading="gridLayoutLoading">
+  <div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" :loading="gridLayoutLoading">
     <grid-layout
       v-if="gridLayoutShow"
       :col-num="12"
@@ -55,6 +55,7 @@
         :ref="'chart-fullscreen' + fullscreen.chartInfo.id"
         :chart-info="fullscreen.chartInfo"
         :is-fullscreen="true"
+        :panelLock="panelLock"
         :time-range="timeRange"
         @showFullscreen="showFullscreen"
       ></panel-chart>
@@ -75,6 +76,7 @@ export default {
     obj: Object,
     timeRange: Array, // 时间范围
     panelLock: { type: Boolean, default: true },
+    isGroup: { type: Boolean, default: false },
     dataList: Array // 看板中所有图表信息
   },
   components: {
@@ -104,7 +106,10 @@ export default {
   },
   methods: {
     init () {
-      const dom = document.getElementById(`chartList${this.timestamp}`)
+      let dom = document.getElementById(`chartList${this.timestamp}`)
+      if (this.isGroup) {
+        dom = document.getElementById(`chartListGroup${this.timestamp}`)
+      }
       if (dom) {
         this.stepWidth = Math.floor(dom.offsetWidth / 12)
         const span = document.querySelector('.temp-dom')

nezha-fronted/src/components/chart/panelChart.vue

@@ -15,6 +15,7 @@
       ref="chart"
       :chart-data="chartData"
       :chart-info="chartInfo"
+      :panelLock="panelLock"
       :is-fullscreen="isFullscreen"
       :loading="loading"
     ></chart>
@@ -40,7 +41,8 @@ export default {
   props: {
     chartInfo: Object, // 其中的param json串已转化为对象
     timeRange: Array, // 时间范围
-    isFullscreen: Boolean
+    isFullscreen: Boolean,
+    panelLock: Boolean
   },
   data () {
     return {
@@ -141,6 +143,9 @@ export default {
             if (this.chartInfo.type === 'diagram') {
               this.chartData = [this.chartInfo.param.topo]
             }
+            if (this.chartInfo.type === 'group') {
+              this.chartData = [...this.chartInfo.children]
+            }
             break
           }
         }

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

@@ -84,6 +84,7 @@
             <div class="box-content" v-loading="chartListLoading">
               <chart-list
                 ref="chartList"
+                name="panel"
                 :class="{'show-top':showTopBtn}"
                 :data-list="dataList"
                 :nowTimeType="nowTimeType"
@@ -147,7 +148,6 @@
 <script>
 import ChartBox from './chartBox'
 import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
-import ChartList from '../../chart/chartList'
 import bus from '../../../libs/bus'
 import pickTime from '../../common/pickTime'
 import selectPanel from '../../common/popBox/selectPanel'
@@ -271,7 +271,6 @@ export default {
   },
   components: {
     'chart-box': ChartBox,
-    'chart-list': ChartList,
     'pick-time': pickTime,
     'panel-box': panelBox,
     topToolMoreOptions,

nezha-fronted/src/main.js

@@ -27,6 +27,7 @@ import Pagination from './components/common/pagination' // 引入全局分页组
 import searchInput from './components/common/searchInput' // 搜索框组件
 import elementSet from './components/common/elementSet' // 自定义表头组件
 import MyElSelect from './components/common/elSelect/MyElSelect'
+import chartList from '@/components/chart/chartList.vue' // 全局引入 chartList 组件 防止 chart-group爆粗
 
 import loading from '@/components/common/loading'
 import pickTime from '@/components/common/pickTime'
@@ -54,6 +55,7 @@ Vue.component('loading', loading)
 Vue.component('pick-time', pickTime)
 Vue.component('myDatePicker', myDatePicker)
 Vue.component('nzDataList', nzDataList)
+Vue.component('chartList', chartList)
 
 Vue.prototype.$axios = axios
 Vue.prototype.$post = post