diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index b0d5fd9df..51b6eaca0 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -17,6 +17,7 @@
   .main-container {
     padding: 10px;
     height: 100%;
+    box-sizing: border-box;
     background-color: $--background-color-base;
     &>div {
       background-color: $--background-color-empty;
diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
new file mode 100644
index 000000000..54cc63880
--- /dev/null
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -0,0 +1,70 @@
+.panel-chart {
+  border: 1px solid $--chart-box-border-color;
+  height: 100%;
+
+  .chart-header {
+    display: flex;
+    justify-content:space-between;
+    align-items:center;
+    padding: 0 10px;
+    height: 39px;
+
+    font-size: 14px;
+    line-height: 40px;
+    color: $--color-text-primary;
+    transition: all 0.2s;
+
+    &:hover {
+      background-color: $--chart-title-hover-background-color;
+
+      .chart-header__tools {
+        .chart-header__tool .tool__icon {
+          visibility: visible;
+        }
+      }
+    }
+    .chart-header__title {
+      max-width: calc(100% - 100px);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .chart-header__tools {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .chart-header__tool {
+        margin-left: 20px;
+        cursor: pointer;
+
+        .tool__icon {
+          visibility: hidden;
+          font-size: 14px;
+          color: $--color-text-primary;
+        }
+        .nz-chart-dropdown {
+          position: absolute;
+          top: 44px;
+          right: 0;
+          left: unset;
+          transform-origin: center top;
+          z-index: 1000;
+          width: 180px;
+          li {
+            padding-left: 15px !important;
+            padding-right: 0 !important;
+            width: calc(100% - 15px);
+            text-align: left;
+            i {
+              margin-right: 10px;
+            }
+            &:hover i {
+              color: $--color-primary;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss
index 446f3bfcb..3333168ba 100644
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -1,3 +1,4 @@
+@import './chart/chart.scss';
 @import './charts/chart.scss';
 @import './charts/chart-list.scss';
 @import './cli/webSSH.scss';
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
index f99735a47..934eab9f7 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
@@ -15,13 +15,12 @@
 .table-list {
   margin-top: 0;
   overflow-y: auto;
-  height: calc(100% - 50px);
+  height: calc(100% - 60px);
   flex: 1;
   background-color: $--dashboard-background-color-empty;
 }
 .table-list-box {
   border-top: 1px solid $--background-color-base;
-  padding: 10px 0 0 10px;
   background-color: $--background-color-empty;
 }
 .box-content {
diff --git a/nezha-fronted/src/components/chart/chart-list-grid.vue b/nezha-fronted/src/components/chart/chart-list-grid.vue
new file mode 100644
index 000000000..8473dc663
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart-list-grid.vue
@@ -0,0 +1,2046 @@
+<template>
+  <div id="listContainer" ref="listContainer">
+    <grid-layout :col-num="12"
+                 :is-draggable="!panelLock"
+                 :is-resizable="!panelLock"
+                 :layout.sync="dataList"
+                 :row-height="stepWidth"
+                 :use-css-transforms="true"
+                 :vertical-compact="true"
+    >
+      <grid-item v-for="(item, index) in dataList"
+                 :key="item.id"
+                 :h="item.h"
+                 :i="item.i"
+                 :w="item.w"
+                 :x="item.x"
+                 :y="item.y"
+                 drag-allow-from=".vue-draggable-handle"
+                 drag-ignore-from=".no-drag"
+                 unselectable="on"
+                 @move="moveEvent"
+                 @moved="movedEvent"
+                 @resize="resizeEvent"
+                 @resized="resizedEvent"
+                 @container-resized="containerResizedEvent"
+      >
+        <div v-show="!item.isHide" :id="'chart-' + item.id" :key="item.id" :ref="'chart' + item.id" :class="{'drag-disabled': !draggable,'chartBox':true}" :name="item.name"  :style="{marginBottom: extraMarginBottom}">
+          <line-chart-block v-if="item.type === 'line' || (item.type === 'bar' && (!item.param.statistics || item.param.statistics === 'null')) ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
+                            :ref="'editChart'+item.id" :chart-data="item" :chart-index="index"
+                            :from="from"
+                            :is-lock="panelLock"
+                            :panel-id="filter.panelId"
+                            :temp-dom="tempDom"
+                            @sync="()=>{chartBySync(item)}"
+                            @on-refresh-data="refreshChart"
+                            @on-remove-chart-block="removeChart"
+                            @on-duplicate-chart-block="duplicateChart"
+                            @on-drag-chart="editChartForDrag"
+                            @on-edit-chart-block="editData"
+                            @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></line-chart-block>
+
+          <logs v-if="item.type === 'logs'" :key="'inner' + item.id"
+                :ref="'editChart'+item.id" :chart-data="item" :chart-index="index"
+                :endTime="filter.end_time" :from="from"
+                :is-lock="panelLock"
+                :panel-id="filter.panelId"
+                :startTime="filter.start_time"
+                :temp-dom="tempDom"
+                @sync="()=>{chartBySync(item)}"
+                @on-refresh-data="refreshChart"
+                @on-remove-chart-block="removeChart"
+                @on-duplicate-chart-block="duplicateChart"
+                @on-drag-chart="editChartForDrag"
+                @on-edit-chart-block="editData"
+                @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></logs>
+
+          <chart-single-stat  v-if="item.type === 'singleStat'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                              :chart-index="index"
+                              :from="from"
+                              :is-lock="panelLock"
+                              :panel-id="filter.panelId"
+                              @sync="()=>{chartBySync(item)}"
+                              @on-refresh-data="refreshChart"
+                              @on-search-data="searchData"
+                              @on-remove-chart-block="removeChart"
+                              @on-duplicate-chart-block="duplicateChart"
+                              @on-drag-chart="editChartForDrag"
+                              @on-edit-chart-block="editData"
+                              @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chart-single-stat>
+
+          <chart-table  v-if="item.type === 'table'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                        :chart-index="index"
+                        :from="from"
+                        :is-lock="panelLock"
+                        :panel-id="filter.panelId"
+                        @sync="()=>{chartBySync(item)}"
+                        @on-refresh-data="refreshChart"
+                        @on-search-data="searchData"
+                        @on-remove-chart-block="removeChart"
+                        @on-duplicate-chart-block="duplicateChart"
+                        @on-drag-chart="editChartForDrag"
+                        @on-edit-chart-block="editData"
+                        @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chart-table>
+
+          <chart-url  v-if="item.type === 'url'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                      :chart-index="index"
+                      :from="from"
+                      :is-lock="panelLock"
+                      :panel-id="filter.panelId"
+                      @sync="()=>{chartBySync(item)}"
+                      @on-refresh-data="refreshChart"
+                      @on-search-data="searchData"
+                      @on-remove-chart-block="removeChart"
+                      @on-duplicate-chart-block="duplicateChart"
+                      @on-drag-chart="editChartForDrag"
+                      @on-edit-chart-block="editData"
+                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chart-url>
+
+          <chart-detail  v-if="item.type === 'assetInfo' || item.type === 'projectInfo' || item.type === 'endpointInfo' || item.type === 'alertRuleInfo'" :key="'inner' + item.id" :ref="'editChart'+item.id"
+                         :chart-data="item" :chart-index="index"
+                         :editChartId="'editChartId' + item.id"
+                         :from="from"
+                         :is-lock="panelLock"
+                         :panel-id="filter.panelId"
+                         @sync="()=>{chartBySync(item)}"
+                         @on-refresh-data="refreshChart"
+                         @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+          ></chart-detail>
+
+          <text-chart v-if="item.type === 'text'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                      :chart-index="index"
+                      :from="from"
+                      :is-lock="panelLock"
+                      :panel-id="filter.panelId"
+                      @sync="()=>{chartBySync(item)}"
+                      @on-refresh-data="refreshChart"
+                      @on-remove-chart-block="removeChart"
+                      @on-duplicate-chart-block="duplicateChart"
+                      @on-drag-chart="editChartForDrag"
+                      @on-edit-chart-block="editData"
+                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+          ></text-chart>
+
+          <diagramChart v-if="item.type === 'diagram'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                        :chart-index="index"
+                        :from="from"
+                        :is-lock="panelLock"
+                        :panel-id="filter.panelId"
+                        @sync="()=>{chartBySync(item)}"
+                        @on-refresh-data="refreshChart"
+                        @on-remove-chart-block="removeChart"
+                        @on-duplicate-chart-block="duplicateChart"
+                        @on-drag-chart="editChartForDrag"
+                        @on-edit-chart-block="editData"
+                        @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+          ></diagramChart>
+
+          <chart-alert-list v-if="item.type  === 'alertList'" :ref="'editChart'+item.id"
+                            :chart-index="index"
+                            :chart-info="item"
+                            :chartData="item"
+                            :editChartId="'editChartId' + item.id"
+                            :from="from"
+                            :is-lock="panelLock"
+                            :panel-id="filter.panelId"
+                            @sync="()=>{chartBySync(item)}"
+                            @on-refresh-data="refreshChart"
+                            @on-search-data="searchData"
+                            @on-remove-chart-block="removeChart"
+                            @on-duplicate-chart-block="duplicateChart"
+                            @on-drag-chart="editChartForDrag"
+                            @on-edit-chart-block="editData"
+                            @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+          ></chart-alert-list>
+
+          <chart-pie  v-if="item.type === 'pie'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item" :chart-index="index"
+                      :from="from"
+                      :is-lock="panelLock"
+                      :panel-id="filter.panelId"
+                      :temp-dom="tempDom"
+                      @sync="()=>{chartBySync(item)}"
+                      @on-refresh-data="refreshChart"
+                      @on-search-data="searchData"
+                      @on-remove-chart-block="removeChart"
+                      @on-duplicate-chart-block="duplicateChart"
+                      @on-drag-chart="editChartForDrag"
+                      @on-edit-chart-block="editData"
+                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chart-pie>
+
+          <chartBarStatis  v-if="(item.type === 'bar'&& item.param.statistics && item.param.statistics !== 'null')" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item" :chart-index="index"
+                           :from="from"
+                           :is-lock="panelLock"
+                           :panel-id="filter.panelId"
+                           :temp-dom="tempDom"
+                           @sync="()=>{chartBySync(item)}"
+                           @on-refresh-data="refreshChart"
+                           @on-search-data="searchData"
+                           @on-remove-chart-block="removeChart"
+                           @on-duplicate-chart-block="duplicateChart"
+                           @on-drag-chart="editChartForDrag"
+                           @on-edit-chart-block="editData"
+                           @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chartBarStatis>
+
+          <chart-group  v-if="item.type === 'group'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                        :chart-index="index"
+                        :dataList='dataList'
+                        :filter="filter"
+                        :from="from"
+                        :is-lock="panelLock"
+                        :panel-id="filter.panelId"
+                        :panelLock="panelLock"
+                        @loadChartData="loadChartData"
+                        @moveGroupItem="moveGroupItem"
+                        @sync="()=>{chartBySync(item)}"
+                        @on-refresh-data="refreshChart"
+                        @on-search-data="searchData"
+                        @on-remove-chart-block="removeChart"
+                        @on-duplicate-chart-block="duplicateChart"
+                        @on-drag-chart="editChartForDrag"
+                        @on-edit-chart-block="editData"
+                        @on-edit-group-chart="editDataGroup"
+                        @on-remove-group-chart="removeChartGroup"
+                        @on-duplicate-group-chart="duplicateChartGroup"
+                        @on-add-group-item-chart="addGroupItem"
+                        @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chart-group>
+        </div>
+      </grid-item>
+    </grid-layout>
+  </div>
+
+</template>
+
+<script>
+import VueGridLayout from 'vue-grid-layout'
+import { fromRoute } from '@/components/common/js/constants'
+import bus from '@/libs/bus'
+import chartTempData from '@/components/charts/chartTempData'
+import axios from 'axios'
+import chartDataFormat from '@/components/charts/chartDataFormat'
+import { chartResizeTool } from '@/components/common/js/tools'
+import chartAlertList from '@/components/charts/chart-alert-list'
+import chartDetail from '@/components/charts/chart-detail'
+import lineChartBlock from '@/components/charts/line-chart-block'
+import chartTable from '@/components/charts/chart-table'
+import chartUrl from '@/components/charts/chart-url'
+import chartSingleStat from '@/components/charts/chart-single-stat'
+import draggable from 'vuedraggable'
+import textChart from '@/components/charts/text-chart'
+import chartPie from '@/components/charts/chart-pie'
+import chartGroup from '@/components/charts/chart-group'
+import chartBarStatis from '@/components/charts/chart-bar-statistics'
+import diagramChart from '@/components/charts/diagram-chart'
+import logs from '@/components/charts/logs'
+import chartData from './testData'
+
+export default {
+  name: 'chart-list-grid',
+  props: {
+    fromRoute,
+    isModel: { type: Boolean, default: false },
+    draggable: { type: Boolean, default: true },
+    from: { type: String },
+    obj: Object,
+    panelLock: { type: Boolean, default: false },
+    hasGroup: { type: Boolean, default: true },
+    panelDataList: Array
+  },
+  components: {
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem,
+    chartAlertList,
+    chartDetail,
+    lineChartBlock,
+    chartTable,
+    chartUrl,
+    chartSingleStat,
+    textChart,
+    chartPie,
+    chartGroup,
+    chartBarStatis,
+    diagramChart,
+    logs
+  },
+  data () {
+    return {
+
+      chartResizeTool: chartResizeTool,
+      filter: {},
+      dataList: [], // 看板中所有图表信息
+      dataListDragTmp: [],
+      time: {
+        start: '',
+        end: ''
+      },
+      chartListNoData: false,
+      extraMarginBottom: 0, // dom额外的margin
+      panelId: '',
+      timer: null,
+      finshGetData: false,
+      dataTotalList: [], // 懒加载：总记录数
+      dataTotalListBak: [], // 用于查询：懒加载，总记录备份
+      isPage: false, // 是否分页懒加载
+      currentRecordNum: 0, // 懒加载：本次取记录的index，第一次从0开始取，每次取3行
+      lineNum: 3, // 每页加载的行数
+      pagePanelId: '', // 当前分页的panelId
+      dragging: null,
+      // chartDataCacheGroup:new Map,//图表数据缓存，用于查询：id:{}
+      stepWidth: null,
+
+      tempDom: { height: '', width: '' },
+      // showShadow:false,
+      resizable: true,
+      index: 0,
+      eventLog: []
+    }
+  },
+  watch: {
+    eventLog: function () {
+      // const eventsDiv = this.$refs.eventsDiv
+      // eventsDiv.scrollTop = eventsDiv.scrollHeight
+    },
+    panelDataList (n) {
+      this.getData(this.filter)
+    }
+  },
+  methods: {
+    drag: function (e) {
+      console.log(e)
+      const parentRect = document.getElementById('content').getBoundingClientRect()
+      let mouseInGrid = false
+      if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true
+      }
+      if (mouseInGrid === true && (this.layout.findIndex(item => item.i === 'drop')) === -1) {
+        this.layout.push({
+          x: (this.layout.length * 2) % (this.colNum || 12),
+          y: this.layout.length + (this.colNum || 12), // puts it at the bottom
+          w: 1,
+          h: 1,
+          i: 'drop'
+        })
+      }
+      const index = this.layout.findIndex(item => item.i === 'drop')
+      if (index !== -1) {
+        const el = this.$refs.gridlayout.$children[index]
+        el.dragging = { top: mouseXY.y - parentRect.top, left: mouseXY.x - parentRect.left }
+        const new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left)
+        if (mouseInGrid === true) {
+          this.$refs.gridlayout.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 1, 1)
+          DragPos.i = String(index)
+          DragPos.x = this.layout[index].x
+          DragPos.y = this.layout[index].y
+        }
+        if (mouseInGrid === false) {
+          this.$refs.gridlayout.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 1, 1)
+          this.layout = this.layout.filter(obj => obj.i !== 'drop')
+        }
+      }
+    },
+    dragend: function (e) {
+      const parentRect = document.getElementById('content').getBoundingClientRect()
+      let mouseInGrid = false
+      if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true
+      }
+      if (mouseInGrid === true) {
+        alert(`Dropped element props:\n${JSON.stringify(DragPos, ['x', 'y', 'w', 'h'], 2)}`)
+        this.$refs.gridlayout.dragEvent('dragend', 'drop', DragPos.x, DragPos.y, 1, 1)
+        this.layout = this.layout.filter(obj => obj.i !== 'drop')
+        // UNCOMMENT below if you want to add a grid-item
+        /*
+        this.layout.push({
+            x: DragPos.x,
+            y: DragPos.y,
+            w: 1,
+            h: 1,
+            i: DragPos.i,
+        });
+        this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);
+        try {
+            this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
+        } catch {
+        }
+        */
+      }
+    },
+    moveEvent: function (i, newX, newY) {
+      const msg = 'MOVE i=' + i + ', X=' + newX + ', Y=' + newY
+      this.eventLog.push(msg)
+      console.log(msg)
+    },
+    movedEvent: function (i, newX, newY) {
+      const msg = 'MOVED i=' + i + ', X=' + newX + ', Y=' + newY
+      this.eventLog.push(msg)
+      console.log(msg)
+    },
+    resizeEvent: function (i, newH, newW, newHPx, newWPx) {
+      const msg = 'RESIZE i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx
+      this.eventLog.push(msg)
+      console.log(msg,this.$refs['editChart' + i])
+      setTimeout(()=>{
+        this.$refs['editChart' + i][0].chartResize()
+      })
+    },
+    resizedEvent: function (i, newX, newY, newHPx, newWPx) {
+      const msg = 'RESIZED i=' + i + ', X=' + newX + ', Y=' + newY + ', H(px)=' + newHPx + ', W(px)=' + newWPx
+      this.eventLog.push(msg)
+      console.log(msg)
+      setTimeout(()=>{
+        this.$refs['editChart' + i][0].chartResize()
+      },50)
+    },
+    containerResizedEvent: function (i, newH, newW, newHPx, newWPx) {
+      const msg = 'CONTAINER RESIZED i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx
+      this.eventLog.push(msg)
+      console.log(msg)
+    },
+    layoutCreatedEvent: function (newLayout) {
+      this.eventLog.push('Created layout')
+      console.log('Created layout: ', newLayout)
+    },
+    layoutBeforeMountEvent: function (newLayout) {
+      this.eventLog.push('beforeMount layout')
+      console.log('beforeMount layout: ', newLayout)
+    },
+    layoutMountedEvent: function (newLayout) {
+      this.eventLog.push('Mounted layout')
+      console.log('Mounted layout: ', newLayout)
+    },
+    layoutReadyEvent: function (newLayout) {
+      this.eventLog.push('Ready layout')
+      console.log('Ready layout: ', newLayout)
+    },
+    layoutUpdatedEvent: function (newLayout) {
+      this.eventLog.push('Updated layout')
+      console.log('Updated layout: ', newLayout)
+    },
+    dropmenuChange (id, show) {
+      if (show) {
+        const chart = this.$refs['chart' + id][0]
+        const container = this.$refs.listContainer
+        const heightDifference = container.offsetHeight - chart.offsetTop
+        if (heightDifference < 235) {
+          this.extraMarginBottom = 235 - heightDifference
+          this.$nextTick(() => {
+            container.scrollTop = container.offsetHeight
+          })
+        }
+      } else {
+        this.extraMarginBottom = 0
+      }
+    },
+    tempDomInit () {
+      const span = document.querySelector('.temp-dom')
+      this.tempDom.width = span.offsetWidth
+    },
+    start (event) {
+      event.item.querySelector('.chartTitle').style.background = '#d8dce1'
+      const projectAndAssetFeatureInfos = event.item.querySelectorAll('.feature-content')
+      if (projectAndAssetFeatureInfos && projectAndAssetFeatureInfos.length > 0) {
+        projectAndAssetFeatureInfos.forEach(item => {
+          item.classList.remove('unfold')
+          item.classList.remove('fold')
+        })
+      }
+      this.dataListDragTmp = [...this.dataList]
+    },
+    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) {
+            item.children.forEach(chart => {
+              i++
+              newWeights.push({ id: chart.id, groupId: item.id, weight: this.dataList.length + i })
+            })
+          } else {
+            item.children = []
+          }
+        })
+        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) {
+          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 && item.children) {
+          group.children.forEach(chart => {
+            i++
+            newWeights.push({ id: chart.id, groupId: item.id, weight: this.dataList.length + i })
+          })
+        } else {
+          item.children = []
+        }
+      })
+      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
+
+      const chartTitle = dragClass.querySelector('.chartTitle')
+      chartTitle.style.background = '#d8dce1'
+    },
+    clone (event) {
+      const canvas = event.item.querySelector('canvas')
+      const canvasclone = event.clone.querySelector('canvas')
+      canvasclone.style.border = 'solid 1px yellow'
+      if (canvas && canvasclone) {
+        const image = new Image()
+        image.src = canvas.toDataURL()
+        const ctxClone = canvasclone.getContext('2d')
+        image.onload = function () {
+          ctxClone.drawImage(image, 0, 0)
+        }
+      }
+    },
+    dragPosition (e) {
+      const odiv = e// 目标元素e.target
+      // var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
+      // 得到点击时该容器的：
+      /* const startY = e.clientY
+      const startX = e.clientX
+      const _this = this */
+      // 鼠标相对元素的位置
+      const distY = e.clientY - odiv.offsetLeft
+      const distX = e.clientX - odiv.offsetTop
+      document.onmousemove = function (e) {
+        e.preventDefault()
+        const left = e.clientX - distX
+        const top = e.clientY - distY
+        odiv.style.top = top + 'px'
+        odiv.style.left = left + 'px'
+      }
+
+      document.onmouseup = function () {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    },
+    handleDragStart (e, item) {
+      this.dragging = item
+    },
+    handleDragEnd (e, item) {
+      this.dragging = null
+    },
+    // 首先把div变成可以放置的元素，即重写dragenter/dragover
+    handleDragOver (e) {
+      e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
+    },
+    handleDragEnter (e, item) {
+      e.dataTransfer.effectAllowed = 'move'// 为需要移动的元素设置dragstart事件
+      if (item === this.dragging) {
+        return
+      }
+      const newItems = [...this.dataList]
+      const src = newItems.indexOf(this.dragging)
+      const dst = newItems.indexOf(item)
+
+      newItems.splice(dst, 0, ...newItems.splice(src, 1))
+
+      this.dataList = newItems
+    },
+    initCurrentRecordNum () {
+      this.currentRecordNum = 0
+    },
+    cleanData () {
+      this.dataList = []
+      this.chartDataCacheGroup.clear()
+    },
+    initData (filter) {
+      this.cleanData()
+      // 内含 panelId,开始时间,结束时间
+      this.filter = filter
+      this.pagePanelId = this.filter.panelId
+      this.getData(this.filter)
+    },
+    searchCharts (searchName) {
+      // this.dataList = [];
+      // this.dataTotalList = [];
+      const chartListTmp = []
+      if (searchName && searchName.trim() !== '') {
+        this.dataTotalListBak.forEach((item) => {
+          if (item.name.indexOf(searchName) > -1) {
+            item.isLoaded = false
+            item.isHide = false
+            chartListTmp.push(item)
+          } else {
+            item.isLoaded = true
+            item.isHide = true
+            let groupShowFlag = false // 判断group内的chart是否被匹配
+            if (item.type === 'group' && item.children) {
+              item.children.forEach(groupItem => {
+                if (groupItem.name.indexOf(searchName) > -1) {
+                  item.isLoaded = false
+                  item.isHide = false
+                  groupShowFlag = true
+                }
+              })
+              if (groupShowFlag) {
+                item.isLoaded = false
+                item.isHide = false
+                chartListTmp.push(item)
+              } else {
+                chartListTmp.push(item)
+              }
+            } else {
+              chartListTmp.push(item)
+            }
+          }
+        })
+      } else {
+        this.dataTotalListBak.forEach((item) => {
+          item.isLoaded = false
+          item.isHide = false
+          this.chartListNoData = false
+          chartListTmp.push(item)
+        })
+      }
+
+      this.dataTotalList = [...chartListTmp]
+      this.dataList = [...this.dataTotalList]
+      let isAllHide = true
+      this.dataList.map(item => {
+        if (!item.isHide) {
+          isAllHide = false
+        }
+      })
+      this.chartListNoData = isAllHide
+      this.$nextTick(() => {
+        if (this.dataList.length > 0) {
+          this.dataList.forEach((item, index) => {
+            this.$refs['editChart' + item.id][0].showLoad(item)// 之后要实现
+            this.setChartSize(item, index)// 设置该图表宽度
+            if (!item.isLoaded) {
+              // 获得当前显示在浏览器的图表，从后台获取数据
+              const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
+              this.handleElementInViewport(chartBox, 0, item, index, true)
+            }
+            if (item.type === 'group') {
+              this.$refs['editChart' + item.id][0].$refs.listGroup.searchCharts(searchName, item)
+            }
+          })
+        }
+      })
+    },
+    pageDataList (isAdd, panelId, isSearch) {
+      if (panelId !== this.pagePanelId) {
+        this.currentRecordNum = 0
+      }
+      if (this.dataTotalList && this.dataTotalList.length > 0) {
+        if (this.currentRecordNum >= this.dataTotalList.length) {
+          // alert('数据加载完毕！');
+        } else {
+          const dataTmpList = []
+          let spanSum = 0
+          let line = 0// 行数
+          let isDataFull = false
+          const curRecNum = this.currentRecordNum
+          const len = this.dataTotalList.length
+          for (let i = curRecNum; !isDataFull && i < len; i++) {
+            if (line < this.lineNum) {
+              const item = this.dataTotalList[i]
+              const span = item.span
+              const sumTmp = spanSum + span
+              if (sumTmp <= 12) {
+                spanSum = sumTmp
+              } else { // 大于12表示够1行了，
+                line = line + 1
+                spanSum = span
+              }
+              if (line < this.lineNum) {
+                dataTmpList.push(item)
+                this.currentRecordNum = i + 1
+              } else {
+                this.currentRecordNum = i
+                break
+              }
+            } else { // 数据加载够了
+              isDataFull = true
+              this.currentRecordNum = i
+              break
+            }
+          }
+          if (isAdd) {
+            const oldDataListLen = this.dataList.length
+            const dataListTmp = [...this.dataList]
+            this.dataList = [...dataListTmp.concat(dataTmpList)]
+            this.$nextTick(() => {
+              this.dataSetFirst(dataTmpList, oldDataListLen, isSearch)
+            })
+          } else {
+            this.dataList = [...dataTmpList]
+          }
+        }
+      }
+    },
+
+    // 获取panel详情数据,获取panel下所有chart列表
+    getData (params) {
+      if (this.finshGetData) {
+        return
+      }
+      this.finshGetData = true
+      const param = {
+        panelId: params.panelId,
+        query: params.query,
+        from: params.from
+      }
+      // alert-rule单独处理
+      if (param.from === fromRoute.alertRule) {
+        this.dataList = []
+        this.dataList.push({
+          id: -10,
+          panelId: 0,
+          title: this.$t('alert.config.chart.affectEntity'),
+          span: 4,
+          height: 3,
+          type: 'alertRuleInfo',
+          prev: 0,
+          next: -9,
+          buildIn: 1,
+          draggable: false,
+          resizable: false,
+          editable: false
+        })
+        this.dataList.push({
+          id: -9,
+          panelId: 0,
+          title: this.$t('alert.config.chart.alertNumTrend'),
+          span: 8,
+          height: 6,
+          type: 'line',
+          prev: -10,
+          next: -1,
+          unit: 1,
+          buildIn: 1,
+          elements: [{
+            id: '',
+            expression: `nz_alert_nums{id="${this.obj.id}"}`,
+            type: ''
+          }]
+        })
+        this.$set(this.filter, 'start_time', bus.timeFormate(new Date().getTime() - 24 * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss'))
+        this.$set(this.filter, 'end_time', bus.timeFormate(new Date().getTime(), 'yyyy-MM-dd hh:mm:ss'))
+        this.$nextTick(() => {
+          this.dataList.forEach((item, index) => {
+            this.$set(item, 'from', params.from)
+            this.setChartSize(item, index)// 设置该图表宽度
+            const chartBox = document.getElementById('chart-' + item.id)
+            this.handleElementInViewport(chartBox, 0, item, index)
+            if (item.type === 'group') {
+              this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
+            }
+          })
+        })
+        return
+      }
+      if (param.from == fromRoute.chartTemp) { // 模板列表
+        if (this.panelDataList[0] && this.panelDataList[0].children) {
+          this.panelDataList[0].children.forEach((item1, i) => {
+            item1.chartIndex = i
+          })
+        }
+        this.dataList = this.panelDataList
+        this.$nextTick(() => {
+          this.dataList.forEach((item, index) => {
+            this.$set(item, 'from', params.from)
+            this.setChartSize(item, index)// 设置该图表宽度
+            const chartBox = document.getElementById('chart-' + item.id)
+            this.handleElementInViewport(chartBox, 0, item, index)
+            if (item.type === 'group') {
+              this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
+            }
+          })
+        })
+        this.finshGetData = false
+        return
+      }
+      if (!param.query) delete param.query
+      // 根据panelId获得panel下的所有图表
+      // const groupId = true ? '&groupId=0' : ''
+      if (!params.panelId) {
+        this.finshGetData = false
+        return
+      } // 没有panelId不调用接口
+      this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
+        response = chartData
+        console.log(chartData)
+        if (response.code === 200) {
+          setTimeout(() => {
+            this.finshGetData = false
+          }, 100)
+          response.data.list.forEach((item, index) => {
+            item.isLoaded = false
+            item.i = item.id
+          })
+          this.$emit('panel-list-loading', response.data.list)
+          // chart数据存在dataTotalListBak中
+          if (response.data.list.length > 0) {
+            this.dataTotalListBak = response.data.list
+            this.chartListNoData = false
+          } else {
+            this.dataTotalListBak = response.data
+            this.chartListNoData = true
+          }
+          let chartListTmp = []
+          // 查询条件带name
+          if (this.filter.searchName) {
+            const searchTitleStr = this.filter.searchName
+            this.dataTotalListBak.forEach((item) => {
+              if (item.name.indexOf(searchTitleStr) > -1) {
+                chartListTmp.push(item)
+              }
+            })
+          } else {
+            chartListTmp = this.dataTotalListBak
+          }
+          this.dataTotalList = [...chartListTmp]
+
+          this.dataList = [...this.dataTotalList]
+          let addGroupIndex = 0
+          this.dataList.forEach((item) => {
+            if (item.type === 'group' && item.children) {
+              item.children.forEach(chart => {
+                addGroupIndex++
+                chart.chartIndex = this.dataList.length + addGroupIndex
+              })
+            } else {
+              item.children = []
+            }
+          })
+          // this.showShadow=false;
+          this.$nextTick(() => {
+            if (this.dataList.length > 0) {
+              this.dataList.forEach((item, index) => {
+                this.setChartSize(item, index)// 设置该图表宽度
+                this.$set(item, 'from', params.from)
+                this.$set(item, 'draggable', true)
+                this.$set(item, 'resizable', true)
+                this.$set(item, 'editable', true)
+                if (!item.isLoaded) {
+                  // 获得当前显示在浏览器的图表，从后台获取数据
+                  const chartBox = document.getElementById('chart-' + item.id)
+                  this.handleElementInViewport(chartBox, 0, item, index)
+                }
+                if (item.type === 'group') {
+                  this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
+                }
+              })
+            }
+          })
+        }
+      })
+    },
+    loadChartData (scrollTop) {
+      if (this.dataList.length > 0) {
+        this.dataList.forEach((item, index) => {
+          if (!item.isLoaded) {
+            // 获得当前显示在浏览器的图表，从后台获取数据
+            const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
+            this.handleElementInViewport(chartBox, scrollTop, item, index)
+          }
+          if (item.type === 'diagram') {
+            this.$refs['editChart' + item.id][0].resize()
+          }
+          if (item.type === 'group') {
+            this.$refs['editChart' + item.id][0].$refs.listGroup.loadChartData(scrollTop)
+          }
+        })
+      }
+    },
+    // arr: 该panel下图表list,生成该看板下所有图表
+    dataSetFirst (arr, oldDataListLen, isSearch) {
+      if (arr.length) {
+        arr.forEach((item, index) => {
+          let realIndex = index
+          if (oldDataListLen) {
+            realIndex += oldDataListLen
+          }
+          const chartType = item.type
+          if (chartType !== 'url') {
+            if (isSearch) {
+              this.getChartDataForSearch(item, realIndex)
+            } else {
+              this.getChartData(item, realIndex)
+            }
+          } else {
+            if (!isSearch && this.$refs['editChart' + item.id] && this.$refs['editChart' + item.id][0]) {
+              this.$refs['editChart' + item.id][0].showLoad(item)
+            }
+            this.setChartSize(item, realIndex) // 设置该图表宽度
+          }
+        })
+      }
+    },
+    getChartDataForSearch (chartItem, realIndex) {
+      let chartData = this.chartDataCacheGroup.get(chartItem.id)
+      if (chartData) {
+        const filterType = chartData.filterType
+        const errorMsg = chartData.errorMsg
+        const tableData = chartData.tableData
+        const panelId = chartData.panelId
+        const filter = chartData.filter
+        const legend = chartData.legend
+        const series = chartData.series
+        const singleStatRlt = chartData.singleStatRlt
+        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+          if (chartItem.type === 'table') { // 表格
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                panelId, filter, filterType, errorMsg)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                panelId, filter, '', errorMsg)
+            }
+          } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                panelId, filter, legend, filterType, errorMsg)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                panelId, filter, legend, '', errorMsg)
+            }
+          } else if (chartItem.type === 'singleStat') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                this.filter.panelId, this.filter, filterType, errorMsg)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                this.filter.panelId, this.filter, '', errorMsg)
+            }
+          } else if (chartItem.type === 'text') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, filterType)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, '')
+            }
+          } else if (chartItem.type === 'logs') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, filterType)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, '')
+            }
+          }
+        }
+      } else {
+        this.getChartData(chartItem, realIndex)
+      }
+      chartData = null
+    },
+    // 获取一个图表具体数据,图表信息，图表位置index
+    getChartData (chartInfo, pos, filterType) {
+      const chartItem = chartInfo
+      if (chartItem.type === 'group') {
+        this.$refs['editChart' + chartItem.id][0].setData(chartItem)
+        return
+      }
+      if (chartItem.type === 'assetInfo') {
+        if (chartItem.from !== fromRoute.endpoint) {
+          this.$set(chartItem, 'draggable', true)
+          this.$set(chartItem, 'resizable', true)
+        }
+        this.getAssetInfoChartData(chartItem)
+        return
+      }
+      if (chartItem.type === 'endpointInfo') {
+        this.getEndpointInfoChartData(chartItem)
+        return
+      }
+      if (chartItem.type === 'projectInfo') {
+        chartItem.name = this.$t('project.chart.projectInfo')
+        this.getProjectInfoChartData(chartItem)
+        return
+      }
+      if (chartItem.type === 'alertList') {
+        this.getAlertListChartData(chartItem, filterType)
+        return
+      }
+      if (chartItem.type === 'alertRuleInfo') {
+        this.getAlertRuleChartData(chartItem)
+        return
+      }
+
+      if (chartItem.type == 'diagram') {
+        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+          if (filterType === 'refresh') {
+            this.$get('visual/panel/chart/' + chartItem.id).then(res => {
+              const data = res.data.data
+              data.param = JSON.parse(data.param)
+              this.$refs['editChart' + chartItem.id][0].setData(data, null,
+                this.filter.panelId, null, '')
+            })
+          } else {
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, '')
+          }
+        }
+        return
+      }
+      if (chartItem.type == 'text') {
+        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, filterType)
+          } else {
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, '')
+          }
+        }
+        return
+      }
+      if (chartItem.type == 'logs') {
+        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, filterType)
+          } else {
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, '')
+          }
+        }
+        return
+      }
+      if (this.isModel) {
+        this.modelStaticData(chartInfo, filterType)
+      } else {
+        // 没有数据的设置提示信息暂无数据-针对每一个图
+        const len = chartItem.elements ? chartItem.elements.length : 0
+        if (len === 0) {
+          this.$nextTick(() => {
+            if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter)// ????怎么设置的无数据？？
+            }
+          })
+        } else {
+          let startTime = ''
+          let endTime = ''
+          if (filterType === 'refresh') { // 刷新
+            const now = new Date(bus.computeTimezone(new Date().getTime()))
+            const origin = new Date(this.filter.end_time)
+            const numInterval = now.getTime() - origin.getTime()
+            if (numInterval >= 60000) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
+              startTime = this.getNewTime(this.filter.start_time, numInterval)
+              endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
+              this.filter.start_time = startTime
+              this.filter.end_time = endTime
+            } else {
+              startTime = this.filter.start_time
+              endTime = this.filter.end_time
+            }
+          } else if (filterType === 'showFullScreen') { // 全屏时间查询
+            startTime = this.filter.start_time
+            endTime = this.filter.end_time
+            // this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
+          } else {
+            startTime = this.filter.start_time
+            endTime = this.filter.end_time
+          }
+
+          const step = bus.getStep(startTime, endTime)
+          this.$nextTick(() => {
+            const axiosArr = chartItem.elements.map((ele) => {
+              const filterItem = ele
+              let query = filterItem.expression
+              if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给null
+                chartInfo.param.nullType = chartInfo.param.nullType || 'null'
+                query += '&nullType=' + chartInfo.param.nullType
+              }
+              // if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
+              //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+              // }
+              if (this.from === fromRoute.chartTemp) {
+                return chartTempData
+              }
+              if (chartInfo.type == 'logs') {
+                return chartTempData
+              }
+              return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
+            })
+            // 一个图表的所有element单独获取数据
+            axios.all(axiosArr).then((res) => {
+              if (res.length > 0) {
+                const series = []
+                let singleStatRlt = ''
+                const legend = []
+                const tableData = []
+                /* let sumData = {
+                    name: 'sum',
+                    data: [],
+                    visible: true,
+                    threshold: null,
+                  }; */
+                let errorMsg = ''
+                let pieSeries
+                if (chartInfo.type === 'pie') {
+                  pieSeries = {
+                    type: 'pie',
+                    radius: '100%',
+                    center: ['50%', '50%'],
+                    top: '20%',
+                    bottom: '20%',
+                    // roseType: 'radius',
+                    minAngle: 10,
+                    itemStyle: {
+                      borderRadius: 5,
+                      borderColor: '#fff',
+                      borderWidth: 1
+                    },
+                    label: {
+                      show: false
+                    },
+                    emphasis: {
+                      label: {
+                        show: false
+                      }
+                    },
+                    data: []
+                  }
+                }
+                if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
+                  pieSeries = {
+                    type: 'bar',
+                    // roseType: 'radius',
+                    itemStyle: {
+                      borderRadius: 5,
+                      borderColor: '#fff',
+                      borderWidth: 1
+                    },
+                    label: {
+                      show: false
+                    },
+                    emphasis: {
+                      label: {
+                        show: false
+                      }
+                    },
+                    data: []
+                  }
+                }
+                res.forEach((response, innerPos) => {
+                  if (response.status === 'success') {
+                    errorMsg = ''
+                    if (response.data.result) {
+                      // 循环处理每个elements下获取的数据列
+                      if (chartItem.type === 'singleStat') {
+                        if (response.data.result.length === 1) {
+                          const statistics = chartItem.param.statistics || 'null'
+                          if (response.data.result[0].values) {
+                            singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values)
+                          }
+                        } else if (response.data.result.length > 1) {
+                          singleStatRlt = this.$t('dashboard.panel.singleStatErrorTip')
+                        }
+                      } else {
+                        response.data.result.forEach((queryItem, resIndex) => {
+                          let seriesItem = {
+                            theData: {
+                              name: '',
+                              symbol: 'emptyCircle', // 去掉点
+                              symbolSize: [2, 2],
+                              smooth: 0.2, // 曲线变平滑
+                              showSymbol: false,
+                              data: [],
+                              lineStyle: {
+                                width: 1,
+                                opacity: 0.9
+                              },
+                              animation: false,
+                              type: chartInfo.type
+                            },
+                            metric_name: ''
+                          }
+
+                          if (chartInfo.type === 'stackArea') {
+                            seriesItem.theData.type = 'line'
+                            seriesItem.theData.stack = chartInfo.name
+                            seriesItem.theData.areaStyle = { opacity: 0.3 }
+                          }
+                          if ((chartInfo.type === 'line' || chartInfo.type === 'stackArea' || chartInfo.type === 'bar') && chartInfo.param && chartInfo.param.threshold) {
+                            seriesItem.theData.markLine = {
+                              silent: true,
+                              symbol: ['circle', 'circle'],
+                              label: {
+                                distance: this.computeDistance(chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(chartInfo.param.threshold)),
+                                formatter (params) {
+                                  return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value)
+                                }
+                              },
+                              lineStyle: {
+                                color: '#d64f40',
+                                width: 2,
+                                type: 'dotted'
+                              },
+                              data: [{
+                                yAxis: Number(chartInfo.param.threshold)
+                              }]
+                            }
+                          }
+                          // 图表中每条线的名字,后半部分
+                          let host = ''// up,
+                          if (queryItem.metric.__name__) {
+                            host = `${queryItem.metric.__name__}{`// up,
+                          }
+                          const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+                          // 设置时间-数据格式对
+                          let tempArr = []
+                          let dpsArr = []
+                          tempArr = queryItem.values
+                          dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                          dpsArr = dpsArr.map(item => {
+                            return [item[0], [item[1][0], Number(item[1][1])]]
+                          })
+                          // 判断是否有数据, && tagsArr.length > 0
+                          if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                            tagsArr.forEach((tag, i) => {
+                              if (tag !== '__name__') {
+                                host += `${tag}="${queryItem.metric[tag]}",`
+                              }
+                            })
+                            if (host.endsWith(',')) {
+                              host = host.substr(0, host.length - 1)
+                            }
+                            if (queryItem.metric.__name__) {
+                              host += '}'
+                            }
+                            if (!host || host === '') {
+                              host = chartItem.elements[innerPos].expression
+                            }
+                            // 处理legend别名
+                            let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend)
+                            if (!alias || alias === '') {
+                              alias = host
+                            }
+                            legend.push({ name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex, alias: alias })
+                            // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+
+                            seriesItem.theData.name = host + '-' + chartItem.elements[innerPos].id + '-' + resIndex
+                            // alert(seriesItem.theData.name);
+                            seriesItem.metric_name = seriesItem.theData.name
+                            // 将秒改为毫秒
+                            // alert('table=='+JSON.stringify(queryItem))
+                            seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+                              /* 曲线汇总暂不需要
+                                if (sumData.data[dpsIndex]) {
+                                  const sumNum = sumData.data[dpsIndex][1] || 0;
+                                  sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
+                                } else {
+                                  sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
+                                }
+                                */
+                              // let t_date = new Date(dpsItem[0] * 1000);
+                              // let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
+                              tableData.push({ // 表格数据
+                                // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+                                // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+                                element: { element: host, alias: alias },
+                                // time: timeTmp,//采集时间
+                                // value: dpsItem[1],//数值
+                                data: [dpsItem[0] * 1000, dpsItem[1]]
+                              })
+                              return [dpsItem[0] * 1000, dpsItem[1]]
+                            })
+                            if (chartInfo.type === 'pie') {
+                              pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
+                            } else if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
+                              pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
+                            } else {
+                              series.push(seriesItem.theData)
+                              seriesItem = null
+                            }
+                          } else if (chartItem.elements && chartItem.elements[innerPos]) {
+                            // 无数据提示
+                            /*
+                              const currentInfo = chartItem.elements[innerPos];
+                              const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
+                              this.$message.warning({
+                                duration: 15,
+                                content: errorMsg,
+                                closable: true,
+                              });
+                              */
+                          }
+                        })
+                      }
+                    }
+                  } else {
+                    if (response.msg) {
+                      // this.$message.error(response.msg);
+                      errorMsg = response.msg
+                    } else if (response.error) {
+                      // this.$message.error(response.error);
+                      errorMsg = response.error
+                    } else {
+                      // this.$message.error(response);
+                      errorMsg = response
+                    }
+                  }
+                })
+
+                if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                  if (chartInfo.type === 'pie') {
+                    series.push(pieSeries)
+                  }
+                  if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
+                    series.push(pieSeries)
+                  }
+                  const chartData = {
+                    chartItem: chartItem,
+                    series: series,
+                    singleStatRlt: singleStatRlt,
+                    legend: legend,
+                    tableData: tableData,
+                    panelId: this.filter.panelId,
+                    filter: this.filter,
+                    filterType: filterType,
+                    errorMsg: errorMsg
+                  }
+                  this.chartDataCacheGroup.set(chartInfo.id, chartData)
+                  if (chartItem.type === 'table') { // 表格
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                        this.filter.panelId, this.filter, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                        this.filter.panelId, this.filter, '', errorMsg)
+                    }
+                  } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type == 'pie') {
+                    if (series.length && chartItem.type === 4) { // 曲线汇总
+                      // series.push(sumData);//后续需要
+                    }
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                        this.filter.panelId, this.filter, legend, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                        this.filter.panelId, this.filter, legend, '', errorMsg)
+                    }
+                  } else if (chartItem.type === 'singleStat') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, '', errorMsg)
+                    }
+                  } else if (chartItem.type === 'logs') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, '', errorMsg)
+                    }
+                  }
+                }
+              } else {
+                const type = chartItem.type
+                if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                  if (type === 'table') {
+                    if (filterType === 'showFullScreen') { // table的全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter)
+                    }
+                  } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
+                    if (filterType === 'showFullScreen') { // table的全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter)
+                    }
+                  } else if (chartItem.type === 'singleStat') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter)
+                    }
+                  } else if (chartItem.type === 'logs') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter)
+                    }
+                  }
+                }
+              }
+            }).catch((error) => {
+              if (error) {
+                this.$message.error(error.toString())
+                console.error(error)
+              }
+            })
+          })
+        }
+      }
+    },
+    computeDistance (str) {
+      const span = document.querySelector('.temp-dom')
+      if (span) {
+        span.textContent = str
+        const txtWidth = parseFloat(window.getComputedStyle(span).width)
+        return Number('-' + (txtWidth + 5))
+      }
+    },
+    addGroupItem (id) {
+      this.$emit('on-add-group-item-chart', id)
+    },
+    modelStaticData (chartInfo, filterType) {
+      const series = []
+      const legend = []
+      const tableData = []
+      const singleStatRlt = 999
+      if (chartInfo.type === 'singleStat') {
+        // const statistics = chartInfo.param.statistics
+      } else {
+        const seriesItem = {
+          theData: {
+            name: '',
+            symbol: 'emptyCircle', // 去掉点
+            symbolSize: [2, 2],
+            smooth: 0.2, // 曲线变平滑
+            showSymbol: false,
+            data: [],
+            lineStyle: {
+              width: 1,
+              opacity: 0.9
+            },
+            type: chartInfo.type
+          },
+          // visible: true,
+          // threshold: null,
+          metric_name: ''
+        }
+        if (chartInfo.type === 'stackArea') {
+          seriesItem.theData.type = 'line'
+          seriesItem.theData.stack = chartInfo.name
+          seriesItem.theData.areaStyle = { opacity: 0.3 }
+        }
+        // 图表中每条线的名字,后半部分
+        let host = 'host'// up,
+        const queryItem = { metric: { item1: 'item1', item2: 'item2', item3: 'item3' }, values: [] }
+        const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+        // 设置时间-数据格式对
+        const tempArr = []
+        const dpsArr = []
+        const timeStamp = Math.floor(new Date().getTime() / 1000)
+        for (let i = 0; i < 20; i++) {
+          tempArr.push([timeStamp - (20 - i) * 15, Math.floor(Math.random() * 10) + ''])
+          queryItem.values.push(tempArr[i])
+          dpsArr.push([i + '', tempArr[i]])
+        }
+        // 判断是否有数据, && tagsArr.length > 0
+        if (dpsArr.length > 0 && this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
+          tagsArr.forEach((tag, i) => {
+            if (tag !== '__name__') {
+              host += `${tag}="${queryItem.metric[tag]}",`
+            }
+          })
+          if (queryItem.metric.__name__) {
+            host += '}'
+          }
+          // 处理legend别名
+          let alias = this.$refs['editChart' + chartInfo.id][0].dealLegendAlias(host, chartInfo.elements[0].legend)
+          if (!alias || alias === '') {
+            alias = host
+          }
+          legend.push({ name: host, alias: alias })
+          // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+          seriesItem.theData.name = host
+          // alert(seriesItem.theData.name);
+          seriesItem.metric_name = seriesItem.theData.name
+          // 将秒改为毫秒
+          // alert('table=='+JSON.stringify(queryItem))
+          seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+            const tData = new Date(dpsItem[0] * 1000)
+            const timeTmp = bus.timeFormate(tData, 'yyyy-MM-dd hh:mm:ss')
+            tableData.push({ // 表格数据
+              // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+              // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+              element: { element: host, alias: alias },
+              time: timeTmp, // 采集时间
+              value: dpsItem[1]// 数值
+            })
+            return [dpsItem[0] * 1000, dpsItem[1]]
+          })
+          series.push(seriesItem.theData)
+        }
+      }
+      if (this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
+        const errorMsg = ''
+        const chartData = {
+          chartItem: chartInfo,
+          series: series,
+          singleStatRlt: singleStatRlt,
+          legend: legend,
+          tableData: tableData,
+          panelId: this.filter.panelId,
+          filter: this.filter,
+          filterType: filterType,
+          errorMsg: errorMsg
+        }
+        this.chartDataCacheGroup.set(chartInfo.id, chartData)
+        if (chartInfo.type === 'table') { // 表格
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
+              this.filter.panelId, this.filter, filterType, '')
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
+              this.filter.panelId, this.filter, '', '')
+          }
+        } else if (chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 4) {
+          if (series.length && chartInfo.type === 4) { // 曲线汇总
+            // series.push(sumData);//后续需要
+          }
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
+              this.filter.panelId, this.filter, legend, filterType, errorMsg)
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
+              this.filter.panelId, this.filter, legend, '', errorMsg)
+          }
+        } else if (chartInfo.type === 'singleStat') {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, filterType, errorMsg)
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, '', errorMsg)
+          }
+        } else if (chartInfo.type === 'logs') {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, filterType, errorMsg)
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, '', errorMsg)
+          }
+        }
+      }
+    },
+    getEndpointInfoChartData (chartInfo) {
+      const detail = []
+      this.$refs['editChart' + chartInfo.id][0].showLoad()
+      chartInfo.name = this.$t('project.chart.endpointInfo')
+      chartInfo.from = fromRoute.endpoint
+      const basicInfo = JSON.parse(JSON.stringify(this.obj))
+      detail.push(
+        {
+          data: {
+            id: basicInfo.id ? basicInfo.id : '-',
+            name: basicInfo.name ? basicInfo.name : '-',
+            // type: basicInfo.module.type,
+            project: basicInfo.project ? basicInfo.project.name : '-',
+            module: basicInfo.module ? basicInfo.module.name : '-',
+            asset: basicInfo.asset ? basicInfo.asset.manageIp : '-',
+            alert: basicInfo.alertNum ? basicInfo.alertNum : 0,
+            state: basicInfo.configs ? basicInfo.configs : '-'
+          },
+          type: 'endpointInfo',
+          title: this.$t('project.chart.basicTitle')
+        }
+      )
+      this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail)
+    },
+    getAssetInfoChartData (chartInfo) {
+      const vm = this
+      chartInfo.name = this.$t('asset.assetInfo')
+      const detail = []
+      if (!this.isModel) {
+        const assetId = this.obj.assetId ? this.obj.assetId : this.obj.id
+        const arr = []
+        arr.push(this.$get(`/asset/asset/${assetId}`))
+        arr.push(this.$get(`/asset/asset/feature/${assetId}`))
+        this.$refs['editChart' + chartInfo.id][0].showLoad()
+
+        // this.$get('/asset/info?id=' + assetId).then(response => {
+        //   if (response.code == 200) {
+        //     response.data && (function () {
+        //       response.data.Basic && detail.push({
+        //         title: vm.$t('project.chart.basicTitle'),
+        //         type: 'basic',
+        //         data: response.data.Basic
+        //       })
+        //       response.data.Attribute && detail.push({
+        //         title: vm.$t('asset.featureTitle'),
+        //         type: 'attribute',
+        //         data: response.data.Attribute
+        //       })
+        //     }())
+        //   }
+        // })
+        Promise.all(arr).then(res => {
+          if (res) {
+            const basic = res[0].data
+            // basic.cabinet = basic.cabinet ? basic.cabinet.name : '-'
+            const obj = {
+              id: basic.id,
+              // host: basic.pingInfo ? basic.pingInfo.host : '-',
+              // assetType: basic.type ? basic.type.name : '-',
+              name: basic.name ? basic.name : '-',
+              manageIp: basic.manageIp ? basic.manageIp : '-',
+              type: basic.type ? basic.type.name : '-',
+              state: basic.state ? basic.state.name : '-',
+              pingRtt: basic.pingInfo ? basic.pingInfo.rtt : '-',
+              dataCenter: basic.dc ? basic.dc.name : '-',
+              cabinet: basic.cabinet ? basic.cabinet.name : '-',
+              brand: basic.brand ? basic.brand.name : '-',
+              model: basic.model ? basic.model.name : '-',
+              tags: basic.fields ? basic.fields : '-',
+              alert: basic.alertNum ? basic.alertNum : 0,
+              endpoint: basic.endpointNum ? basic.endpointNum : 0,
+              // purchaseDate: basic.purchaseDate,
+              // vendor: basic.brand ? basic.brand.name : '-',
+              // sn: basic.sn,
+              pingStatus: basic.pingInfo ? basic.pingInfo.status : '-'
+              // cabinetStart: basic.cabinetStart,
+              // cabinetEnd: basic.cabinetEnd,
+              // pingLastReply: basic.pingInfo ? basic.pingInfo.lastUpdate : ''
+              // principal: basic.dc ? basic.dc.principal : '-',
+              // tel: basic.tel,
+            }
+            basic && detail.push({
+              title: vm.$t('project.chart.basicTitle'),
+              type: 'basic',
+              data: obj
+            })
+            res[1] && detail.push({
+              title: vm.$t('asset.featureTitle'),
+              type: 'attribute',
+              data: res[1].data
+            })
+          }
+          this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
+        })
+      } else {
+        detail.push({
+          title: vm.$t('project.chart.basicTitle'),
+          type: 'basic',
+          data: {
+            sn: 'assetInfo Test',
+            host: '192.168.40.42',
+            pingStatus: 1,
+            pingRtt: 80,
+            cpuNum: '8',
+            memery: '12GB',
+            memery$_$free: '3GB'
+          }
+        })
+        detail.push({
+          title: vm.$t('asset.featureTitle'),
+          type: 'feature',
+          data: {
+            CPU: 'Intel E500',
+            Memory: '256GB',
+            NetworkInterface: ['eth0', 'eth1'],
+            Disk: [{
+              mount: '/',
+              total: '256GB',
+              free: '128GB',
+              usageRate: '50%'
+            }]
+          }
+        })
+        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
+      }
+    },
+    getProjectInfoChartData (chartInfo) {
+      const vm = this
+      const detail = []
+      if (!this.isModel) {
+        this.$refs['editChart' + chartInfo.id][0].showLoad(chartInfo)
+        this.$get('/project/info?id=' + this.obj.id).then(response => {
+          if (response.code === 200) {
+            response.data && (function () {
+              response.data.basic && detail.push({
+                title: vm.$t('project.chart.basicTitle'),
+                data: response.data.basic,
+                type: 'project'
+              })
+              response.data.module && (function () {
+                response.data.module.forEach(d => {
+                  detail.push({
+                    title: `${vm.$t('project.module.module')}：${d.name}`,
+                    data: d,
+                    type: 'module'
+                  })
+                })
+              }())
+            }())
+          }
+          this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter, response.msg)
+        })
+      } else {
+        detail.push({
+          title: 'system',
+          data: {
+            id: 1,
+            name: 'system',
+            remark: '描述信息',
+            alertStat: [1, 2, 3]
+          }
+        })
+        detail.push({
+          title: `${this.$t('project.module.module')}：kafka`,
+          data: {
+            id: 1,
+            name: 'kafka',
+            type: 'http',
+            remark: '描述信息',
+            endpointStat: [3, 23],
+            alertStat: [2, 3, 4]
+          }
+        })
+        detail.push({
+          title: `${this.$t('project.module.module')}：kafkakafkakafkakafkakafkakafkakafka`,
+          data: {
+            id: 2,
+            name: 'kafkakafkakafkakafkakafkakafkakafka',
+            type: 'http',
+            remark: '描述信息',
+            endpointStat: [3, 23],
+            alertStat: [2, 0, 4]
+          }
+        })
+        detail.push({
+          title: `${this.$t('project.module.module')}：kafkakafka`,
+          data: {
+            id: 3,
+            name: 'kafkakafka',
+            type: 'snmp',
+            remark: '描述信息',
+            endpointStat: [3, 0],
+            alertStat: [2, 3, 4]
+          }
+        })
+        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
+      }
+    },
+    getAlertListChartData (chartInfo, filterType) {
+      if (this.obj) {
+        this.$set(chartInfo, 'param', { endpointId: this.obj.id })
+      }
+      this.$refs['editChart' + chartInfo.id][0].getAlertList(null, null, chartInfo)
+    },
+    getAlertRuleChartData (chartInfo) {
+      const vm = this
+      const detail = []
+      const req = new Promise((resolve, reject) => {
+        this.$get('alert/rule/stat?id=' + this.obj.id).then(response => {
+          if (response.code == 200) {
+            response.data && (function () {
+              if (response.data.project && response.data.project.length > 0) {
+                detail.push({ title: vm.$t('overall.entity'), data: convert(response.data.project) })
+              }
+              /* if (response.data.module && response.data.module.length > 0) {
+                  detail.push({title: vm.$t("project.module.module"), data: convert(response.data.module)});
+                }
+                if (response.data.endpoint && response.data.endpoint.length > 0) {
+                  detail.push({title: vm.$t("project.endpoint.endpoint"), data: convert(response.data.endpoint)});
+                } */
+              if (response.data.asset && response.data.asset.length > 0) {
+                detail.push({ title: vm.$t('asset.asset'), data: convert(response.data.asset) })
+              }
+            }())
+            resolve(true)
+          }
+        })
+      })
+      req.then(result => {
+        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail)
+      })
+
+      function convert (d) {
+        const data = {}
+        d.forEach(item => {
+          data[item.name] = item.nums
+          !data._module_ && (data._module_ = {})
+          if (item.module && item.module instanceof Array && item.module.length > 0) {
+            data._module_[item.name] = {}
+            item.module.forEach(m => {
+              data._module_[item.name][m.name] = m.nums
+              !data._module_[item.name]._endpoint_ && (data._module_[item.name]._endpoint_ = {})
+              if (m.endpoint && m.endpoint instanceof Array && m.endpoint.length > 0) {
+                data._module_[item.name]._endpoint_[m.name] = {}
+                m.endpoint.forEach(e => {
+                  data._module_[item.name]._endpoint_[m.name][e.name] = e.nums
+                })
+              }
+            })
+          }
+        })
+        return data
+      }
+    },
+
+    // 设置图表的尺寸
+    setChartSize (item, index) {
+      this.$nextTick(() => {
+        const chartBox = document.getElementById('chart-' + item.id)
+        if (chartBox) {
+          chartBox.style.width = `100%`
+          chartBox.style.height = `100%`
+          if (item.type === 'group') {
+            chartBox.style.height = 'auto'
+          }
+        }
+      })
+    },
+    getNewTime (time, num) {
+      const date = new Date(time)
+      const newDate = new Date(parseInt(date.getTime(), 10) + num)
+      return bus.timeFormate(newDate, 'yyyy-MM-dd hh:mm:ss')
+    },
+    // 删除图表
+    removeChart (chartId) { // from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
+      const chart = this.dataList.find(item => item.id === chartId)
+      if (chart) {
+        this.$emit('on-remove-chart', chart)
+      }
+    },
+    // 删除图表
+    removeChartGroup (chart) { // from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
+      if (chart) {
+        this.$emit('on-remove-chart', chart)
+      }
+    },
+    // 复制图表
+    duplicateChart (chartId, duplicateChartBack) {
+      const chart = this.dataList.find(item => {
+        return item.id === chartId
+      })
+      if (chart) {
+        const copyChart = { ...chart }
+        delete copyChart.id
+        delete copyChart.pid
+        delete copyChart.varId
+        delete copyChart.varType
+        copyChart.name = 'Copy_' + copyChart.name
+        this.$emit('on-edit-chart', copyChart, true)
+      }
+    },
+    duplicateChartGroup (chart) {
+      if (chart) {
+        const copyChart = { ...chart }
+        delete copyChart.id
+        delete copyChart.pid
+        delete copyChart.varId
+        delete copyChart.varType
+        copyChart.name = 'Copy_' + copyChart.name
+        this.$emit('on-edit-chart', copyChart, true)
+      }
+    },
+    // 编辑图表
+    editData (chartId) {
+      // 获取该id下chart的相关信息
+      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
+      chart.height = chartItem.height
+    },
+    // 刷新列表中的一个图表
+    refreshChart (chartId, searchTime) {
+      this.dataList.forEach((item, index) => {
+        if (item.id === chartId) {
+          this.getChartData(item, index, 'refresh')
+        }
+      })
+    },
+    searchData (chartId, searchTime) {
+      if (searchTime) { // 全屏时间查询
+        this.filter.start_time = bus.timeFormate(searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+        this.filter.end_time = bus.timeFormate(searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      }
+      this.dataList.forEach((item, index) => {
+        if (item.id === chartId) {
+          this.getChartData(item, index, 'showFullScreen')
+        }
+      })
+    },
+    // 懒加载，判断网页区域，加载可见区的prom数据
+    handleElementInViewport (ele, scrollTop, item, index, isSearch) {
+      /*
+        网页被卷去的高：document.body.scrollTop
+        网页正文全文高：document.body.scrollHeight
+        网页可见区域高（包括边线的高）：document.body.offsetHeight；
+        网页可见区域高：document.body.clientHeight
+        */
+      const that = this
+      setTimeout(function () {
+        const itemHeight = item.height
+        // 1.元素距离页面顶部的距离
+        const mainOffsetTop = ele.offsetTop // offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
+        // 2.元素的高度
+        const mainHeight = itemHeight // ele.offsetHeight;//itemHeight;
+        // 3.页面滚动的距离
+        const windowScrollTop = scrollTop// document.documentElement.scrollTop || document.body.scrollTop;
+        // 4.浏览器可见区域的高度
+        const windowHeight = (window.innerHeight || document.documentElement.clientHeight) - 50 - 42
+
+        /*
+          * 在窗口上下滚动的情况下, 一个页面元素的状态有下面3种：
+          1.向上滚动超出可见区域
+          2.向下滚动超出可视区域
+          3.在可视区域内
+          * 第一种情况   由于元素随页面向上滚动, 整个页面滚动的距离  大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出
+          * 第二种情况   由于元素随页面向下滚动, 整个页面滚动的距离  小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出
+          * */
+        /* console.log("___isInView____","元素距离页面顶部的距离mainOffsetTop="+mainOffsetTop)//不变
+          console.log("___isInView____","元素高度mainHeight="+mainHeight)//不变
+          console.log("___isInView____","scrollTop页面滚动的距离windowScrollTop="+windowScrollTop)//变
+          console.log("___isInView____","浏览器可见区域高度windowHeight="+windowHeight)//不变
+          console.log(item.title,(mainOffsetTop+mainHeight/3),"<",(windowScrollTop+windowHeight),((mainOffsetTop+mainHeight/3) < (windowScrollTop+windowHeight))) */
+        if ((mainOffsetTop + mainHeight / 3) < (windowScrollTop + windowHeight)) {
+          const chartType = item.type
+          item.isLoaded = true
+          if (chartType !== 'url') {
+            that.getChartDataForSearch(item, index)
+          } else {
+            that.$refs['editChart' + item.id][0].showLoad(item)
+          }
+        }
+      }, 500)
+    },
+    resize () {
+      this.init()
+      this.$nextTick(() => {
+        if (this.$parent.$parent.dateChange) {
+          this.$parent.$parent.dateChange()
+        } else {
+          this.$parent.dateChange()
+        }
+      })
+    },
+    init () {
+      const dom = document.getElementById('listContainer')
+      if (dom) {
+        this.stepWidth = this.chartResizeTool.stepWidth(dom.offsetWidth - 14)
+        this.tempDomInit()
+      }
+    },
+    chartBySync (item) {
+      this.$post('visual/panel/chart/syncTmpl', { ids: [item.id] }).then(res => {
+        if (res.code === 200) {
+          this.getData(this.filter)
+          this.$message.success(this.$t('tip.syncSuccess'))
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    }
+  },
+  created () {
+    this.chartDataCacheGroup = new Map()
+  },
+  mounted () {
+    this.init()
+    window.addEventListener('resize', () => this.resize(), false)
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.resize, false)
+  }
+}
+</script>
+
+<style scoped>
+  .vue-grid-layout {
+    background: #fff;
+  }
+  .vue-grid-item:not(.vue-grid-placeholder) {
+    background: #ccc;
+    border: 1px solid #e7eaed;
+    border-radius: 2px;
+  }
+  .vue-grid-item .resizing {
+    opacity: 0.9;
+  }
+  .vue-grid-item .static {
+    background: #cce;
+  }
+  .vue-grid-item .text {
+    font-size: 24px;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    height: 100%;
+    width: 100%;
+  }
+  .vue-grid-item .no-drag {
+    height: 100%;
+    width: 100%;
+  }
+  .vue-grid-item .minMax {
+    font-size: 12px;
+  }
+  .vue-grid-item .add {
+    cursor: pointer;
+  }
+  .vue-draggable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: 0;
+    right: 0;
+    padding: 0 8px 8px 0;
+    background-origin: content-box;
+    background-color: black;
+    box-sizing: border-box;
+    border-radius: 10px;
+    cursor: pointer;
+  }
+  .layoutJSON {
+    background: #ddd;
+    border: 1px solid black;
+    margin-top: 10px;
+    padding: 10px;
+  }
+  .eventsJSON {
+    background: #ddd;
+    border: 1px solid black;
+    margin-top: 10px;
+    padding: 10px;
+    height: 100px;
+    overflow-y: scroll;
+  }
+  </style>
diff --git a/nezha-fronted/src/components/chart/chart-list-group-grid.vue b/nezha-fronted/src/components/chart/chart-list-group-grid.vue
new file mode 100644
index 000000000..56cbec328
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart-list-group-grid.vue
@@ -0,0 +1,1755 @@
+<style scoped>
+  .chartBox {
+    float:left;
+    padding: 0px 10px 10px 0;
+    position:relative;
+    box-sizing: border-box;
+  }
+  .noData{
+    text-align: center
+  }
+  .list-width{
+    width: calc(100% - 2px);
+    padding: 5px 10px 5px 0px;
+    box-sizing: border-box;
+    overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
+  }
+</style>
+<style lang="scss">
+  .vue-resizable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    bottom: 0;
+    right: 0;
+    cursor: se-resize;
+    box-sizing: border-box;
+    user-select: none;
+    z-index: 99;
+  }
+  .vue-resizable-handle:after {
+    border-right: 2px solid #acb6bf;
+    border-bottom: 2px solid #acb6bf;
+    content: "";
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    width: 5px;
+    height: 5px;
+    box-sizing: inherit;
+  }
+
+  .temp-dom {
+    visibility: hidden;
+    font-size: 14px;
+    position: fixed;
+  }
+</style>
+<template>
+  <div :id="'listContainer' + groupId"  ref="listContainer" class="list-width chart-group"><!--v-drag-->
+    <grid-layout :col-num="12"
+                 :is-draggable="!panelLock"
+                 :is-resizable="!panelLock"
+                 :layout.sync="dataList"
+                 :row-height="stepWidth"
+                 :use-css-transforms="true"
+                 :vertical-compact="true"
+    >
+      <grid-item v-for="(item, index) in dataList"
+                 :key="item.id"
+                 :h="item.h"
+                 :i="item.i"
+                 :w="item.w"
+                 :x="item.x"
+                 :y="item.y"
+                 drag-allow-from=".vue-draggable-handle"
+                 drag-ignore-from=".no-drag"
+                 unselectable="on"
+      >
+        <div v-show="!item.isHide" :id="'chart-' + item.id" :key="item.id" :ref="'chart' + item.id" :class="{'drag-disabled': !draggable,'chartBox':true}" :name="item.name"  :style="{marginBottom: extraMarginBottom}">
+          <line-chart-block v-if="item.type === 'line' || (item.type === 'bar' && (!item.param.statistics || item.param.statistics === 'null')) ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
+                            :ref="'editChart'+item.id" :chart-data="item" :chart-index="index"
+                            :from="from"
+                            :is-lock="panelLock"
+                            :panel-id="filter.panelId"
+                            :temp-dom="tempDom"
+                            @sync="()=>{chartBySync(item)}"
+                            @on-refresh-data="refreshChart"
+                            @on-remove-chart-block="removeChart"
+                            @on-duplicate-chart-block="duplicateChart"
+                            @on-drag-chart="editChartForDrag"
+                            @on-edit-chart-block="editData"
+                            @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></line-chart-block>
+          <logs v-if="item.type === 'logs'" :key="'inner' + item.id"
+                :ref="'editChart'+item.id" :chart-data="item" :chart-index="index"
+                :endTime="filter.end_time" :from="from"
+                :is-lock="panelLock"
+                :panel-id="filter.panelId"
+                :startTime="filter.start_time"
+                :temp-dom="tempDom"
+                @sync="()=>{chartBySync(item)}"
+                @on-refresh-data="refreshChart"
+                @on-remove-chart-block="removeChart"
+                @on-duplicate-chart-block="duplicateChart"
+                @on-drag-chart="editChartForDrag"
+                @on-edit-chart-block="editData"
+                @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></logs>
+
+          <chart-single-stat  v-if="item.type === 'singleStat'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                              :chart-index="index"
+                              :from="from"
+                              :is-lock="panelLock"
+                              :panel-id="filter.panelId"
+                              @sync="()=>{chartBySync(item)}"
+                              @on-refresh-data="refreshChart"
+                              @on-search-data="searchData"
+                              @on-remove-chart-block="removeChart"
+                              @on-duplicate-chart-block="duplicateChart"
+                              @on-drag-chart="editChartForDrag"
+                              @on-edit-chart-block="editData"
+                              @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chart-single-stat>
+
+          <chart-table  v-if="item.type === 'table'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                        :chart-index="index"
+                        :from="from"
+                        :is-lock="panelLock"
+                        :panel-id="filter.panelId"
+                        @sync="()=>{chartBySync(item)}"
+                        @on-refresh-data="refreshChart"
+                        @on-search-data="searchData"
+                        @on-remove-chart-block="removeChart"
+                        @on-duplicate-chart-block="duplicateChart"
+                        @on-drag-chart="editChartForDrag"
+                        @on-edit-chart-block="editData"
+                        @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chart-table>
+
+          <chart-url  v-if="item.type === 'url'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                      :chart-index="index"
+                      :from="from"
+                      :is-lock="panelLock"
+                      :panel-id="filter.panelId"
+                      @sync="()=>{chartBySync(item)}"
+                      @on-refresh-data="refreshChart"
+                      @on-search-data="searchData"
+                      @on-remove-chart-block="removeChart"
+                      @on-duplicate-chart-block="duplicateChart"
+                      @on-drag-chart="editChartForDrag"
+                      @on-edit-chart-block="editData"
+                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chart-url>
+
+          <chart-detail  v-if="item.type === 'assetInfo' || item.type === 'projectInfo' || item.type === 'endpointInfo' || item.type === 'alertRuleInfo'" :key="'inner' + item.id" :ref="'editChart'+item.id"
+                         :chart-data="item" :chart-index="index"
+                         :editChartId="'editChartId' + item.id"
+                         :from="from"
+                         :is-lock="panelLock"
+                         :panel-id="filter.panelId"
+                         @sync="()=>{chartBySync(item)}"
+                         @on-refresh-data="refreshChart"
+                         @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+          ></chart-detail>
+
+          <text-chart v-if="item.type === 'text'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                      :chart-index="index"
+                      :from="from"
+                      :is-lock="panelLock"
+                      :panel-id="filter.panelId"
+                      @sync="()=>{chartBySync(item)}"
+                      @on-refresh-data="refreshChart"
+                      @on-remove-chart-block="removeChart"
+                      @on-duplicate-chart-block="duplicateChart"
+                      @on-drag-chart="editChartForDrag"
+                      @on-edit-chart-block="editData"
+                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+          ></text-chart>
+
+          <diagramChart v-if="item.type === 'diagram'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                        :chart-index="index"
+                        :from="from"
+                        :is-lock="panelLock"
+                        :panel-id="filter.panelId"
+                        @sync="()=>{chartBySync(item)}"
+                        @on-refresh-data="refreshChart"
+                        @on-remove-chart-block="removeChart"
+                        @on-duplicate-chart-block="duplicateChart"
+                        @on-drag-chart="editChartForDrag"
+                        @on-edit-chart-block="editData"
+                        @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+          ></diagramChart>
+
+          <chart-alert-list v-if="item.type  === 'alertList'" :ref="'editChart'+item.id"
+                            :chart-index="index"
+                            :chart-info="item"
+                            :chartData="item"
+                            :editChartId="'editChartId' + item.id"
+                            :from="from"
+                            :is-lock="panelLock"
+                            :panel-id="filter.panelId"
+                            @sync="()=>{chartBySync(item)}"
+                            @on-refresh-data="refreshChart"
+                            @on-search-data="searchData"
+                            @on-remove-chart-block="removeChart"
+                            @on-duplicate-chart-block="duplicateChart"
+                            @on-drag-chart="editChartForDrag"
+                            @on-edit-chart-block="editData"
+                            @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+          ></chart-alert-list>
+
+          <chart-pie  v-if="item.type === 'pie'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item" :chart-index="index"
+                      :from="from"
+                      :is-lock="panelLock"
+                      :panel-id="filter.panelId"
+                      :temp-dom="tempDom"
+                      @sync="()=>{chartBySync(item)}"
+                      @on-refresh-data="refreshChart"
+                      @on-search-data="searchData"
+                      @on-remove-chart-block="removeChart"
+                      @on-duplicate-chart-block="duplicateChart"
+                      @on-drag-chart="editChartForDrag"
+                      @on-edit-chart-block="editData"
+                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chart-pie>
+          <chartBarStatis  v-if="(item.type === 'bar'&& item.param.statistics && item.param.statistics !== 'null')" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item" :chart-index="index"
+                           :from="from"
+                           :is-lock="panelLock"
+                           :panel-id="filter.panelId"
+                           :temp-dom="tempDom"
+                           @sync="()=>{chartBySync(item)}"
+                           @on-refresh-data="refreshChart"
+                           @on-search-data="searchData"
+                           @on-remove-chart-block="removeChart"
+                           @on-duplicate-chart-block="duplicateChart"
+                           @on-drag-chart="editChartForDrag"
+                           @on-edit-chart-block="editData"
+                           @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chartBarStatis>
+        </div>
+      </grid-item>
+    </grid-layout>
+
+    <el-row v-if="dataList.length === 0"  class="noData"></el-row>
+    <!--<div class="page-shadow" v-if="showShadow"></div>-->
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import bus from '../../libs/bus'
+import lineChartBlock from './line-chart-block'
+import chartTable from './chart-table'
+import chartUrl from './chart-url'
+import chartSingleStat from './chart-single-stat'
+import chartDetail from './chart-detail'
+import draggable from 'vuedraggable'
+import chartDataFormat from './chartDataFormat'
+import chartAlertList from './chart-alert-list'
+import textChart from './text-chart'
+import diagramChart from './diagram-chart'
+import chartPie from './chart-pie'
+import chartBarStatis from './chart-bar-statistics'
+import logs from './logs'
+import { fromRoute } from '@/components/common/js/constants'
+import chartTempData from '@/components/charts/chartTempData'
+// import visNetwork from './visNetwork'
+export default {
+  name: 'chartList',
+  props: {
+    isModel: { type: Boolean, default: false },
+    additionalInfo: {},
+    draggable: { type: Boolean, default: true },
+    detail: Object,
+    from: { type: String },
+    panelLock: { type: Boolean, default: false },
+    hasGroup: { type: Boolean, default: true },
+    groupList: {},
+    filterParent: {},
+    groupId: {}
+  },
+
+  components: {
+    chartAlertList,
+    chartDetail,
+    lineChartBlock,
+    chartTable,
+    chartUrl,
+    chartSingleStat,
+    draggable,
+    textChart,
+    chartPie,
+    chartBarStatis,
+    diagramChart,
+    logs
+    // visNetwork,
+  },
+  watch: {
+    groupList: {
+      immediate: true,
+      handler (n) {
+        this.dataList = [...n]
+        this.dataTotalListBak = [...n]
+        this.$nextTick(() => {
+          this.dataList.forEach((item, index) => {
+            // this.getChartData(item, index, this.filter)
+            this.setChartSize(item, index)
+            const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
+            this.handleElementInViewport(chartBox, 0, item, index, true)
+          })
+        })
+      }
+    },
+    filterParent: {
+      immediate: true,
+      handler (n) {
+        this.filter = { ...n }
+        this.pagePanelId = this.filter.panelId
+      }
+    }
+  },
+  data () {
+    return {
+      stepWidth: 30,
+      filter: {},
+      dataList: [], // 看板中所有图表信息
+      dataListDragTmp: [],
+      time: {
+        start: '',
+        end: ''
+      },
+      extraMarginBottom: 0, // dom额外的margin
+      panelId: '',
+      timer: null,
+      dataTotalList: [], // 懒加载：总记录数
+      dataTotalListBak: [], // 用于查询：懒加载，总记录备份
+      isPage: false, // 是否分页懒加载
+      currentRecordNum: 0, // 懒加载：本次取记录的index，第一次从0开始取，每次取3行
+      lineNum: 3, // 每页加载的行数
+      pagePanelId: '', // 当前分页的panelId
+      dragging: null,
+      // chartDataCacheGroup:new Map,//图表数据缓存，用于查询：id:{}
+      stepHeight: 50,
+
+      tempDom: { height: '', width: '' }
+      // showShadow:false,
+    }
+  },
+  methods: {
+    drag: function (e) {
+      const parentRect = document.getElementById('listContainer' + this.groupId).getBoundingClientRect()
+      let mouseInGrid = false
+      if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true
+      }
+      if (mouseInGrid === true && (this.layout.findIndex(item => item.i === 'drop')) === -1) {
+        this.layout.push({
+          x: (this.layout.length * 2) % (this.colNum || 12),
+          y: this.layout.length + (this.colNum || 12), // puts it at the bottom
+          w: 1,
+          h: 1,
+          i: 'drop'
+        })
+      }
+      const index = this.layout.findIndex(item => item.i === 'drop')
+      if (index !== -1) {
+        this.$refs.gridlayout.$children[this.layout.length].$refs.item.style.display = 'none'
+        const el = this.$refs.gridlayout.$children[index]
+        el.dragging = { top: mouseXY.y - parentRect.top, left: mouseXY.x - parentRect.left }
+        const new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left)
+        if (mouseInGrid === true) {
+          this.$refs.gridlayout.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 1, 1)
+          DragPos.i = String(index)
+          DragPos.x = this.layout[index].x
+          DragPos.y = this.layout[index].y
+        }
+        if (mouseInGrid === false) {
+          this.$refs.gridlayout.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 1, 1)
+          this.layout = this.layout.filter(obj => obj.i !== 'drop')
+        }
+      }
+    },
+    dragend: function (e) {
+      const parentRect = document.getElementById('content').getBoundingClientRect()
+      let mouseInGrid = false
+      if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true
+      }
+      if (mouseInGrid === true) {
+        alert(`Dropped element props:\n${JSON.stringify(DragPos, ['x', 'y', 'w', 'h'], 2)}`)
+        this.$refs.gridlayout.dragEvent('dragend', 'drop', DragPos.x, DragPos.y, 1, 1)
+        this.layout = this.layout.filter(obj => obj.i !== 'drop')
+        // UNCOMMENT below if you want to add a grid-item
+        /*
+        this.layout.push({
+            x: DragPos.x,
+            y: DragPos.y,
+            w: 1,
+            h: 1,
+            i: DragPos.i,
+        });
+        this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);
+        try {
+            this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
+        } catch {
+        }
+        */
+      }
+    },
+    dropmenuChange (id, show) {
+      if (show) {
+        const chart = this.$refs['chart' + id][0]
+        const container = this.$refs.listContainer
+        const heightDifference = container.offsetHeight - chart.offsetTop
+        if (heightDifference < 235) {
+          this.extraMarginBottom = 235 - heightDifference
+          this.$nextTick(() => {
+            container.scrollTop = container.offsetHeight
+          })
+        }
+      } else {
+        this.extraMarginBottom = 0
+      }
+    },
+    moveEvent: function (i, newX, newY) {
+      const msg = 'MOVE i=' + i + ', X=' + newX + ', Y=' + newY
+      this.eventLog.push(msg)
+      console.log(msg)
+    },
+    movedEvent: function (i, newX, newY) {
+      const msg = 'MOVED i=' + i + ', X=' + newX + ', Y=' + newY
+      this.eventLog.push(msg)
+      console.log(msg)
+    },
+    resizeEvent: function (i, newH, newW, newHPx, newWPx) {
+      const msg = 'RESIZE i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx
+      this.eventLog.push(msg)
+      console.log(msg)
+    },
+    resizedEvent: function (i, newX, newY, newHPx, newWPx) {
+      const msg = 'RESIZED i=' + i + ', X=' + newX + ', Y=' + newY + ', H(px)=' + newHPx + ', W(px)=' + newWPx
+      this.eventLog.push(msg)
+      console.log(msg)
+    },
+    containerResizedEvent: function (i, newH, newW, newHPx, newWPx) {
+      const msg = 'CONTAINER RESIZED i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx
+      this.eventLog.push(msg)
+      console.log(msg)
+    },
+    layoutCreatedEvent: function (newLayout) {
+      this.eventLog.push('Created layout')
+      console.log('Created layout: ', newLayout)
+    },
+    layoutBeforeMountEvent: function (newLayout) {
+      this.eventLog.push('beforeMount layout')
+      console.log('beforeMount layout: ', newLayout)
+    },
+    layoutMountedEvent: function (newLayout) {
+      this.eventLog.push('Mounted layout')
+      console.log('Mounted layout: ', newLayout)
+    },
+    layoutReadyEvent: function (newLayout) {
+      this.eventLog.push('Ready layout')
+      console.log('Ready layout: ', newLayout)
+    },
+    layoutUpdatedEvent: function (newLayout) {
+      this.eventLog.push('Updated layout')
+      console.log('Updated layout: ', newLayout)
+    },
+    tempDomInit () {
+      const span = document.querySelector('.temp-dom')
+      this.tempDom.width = span.offsetWidth
+    },
+    init() {
+      const dom = document.getElementById('listContainer' + this.groupId)
+      if (dom) {
+        this.stepWidth = this.chartResizeTool.stepWidth(dom.offsetWidth - 14)
+        this.tempDomInit()
+      }
+    },
+    start (event) {
+      event.item.querySelector('.chartTitle').style.background = '#d8dce1'
+      const projectAndAssetFeatureInfos = event.item.querySelectorAll('.feature-content')
+      if (projectAndAssetFeatureInfos && projectAndAssetFeatureInfos.length > 0) {
+        projectAndAssetFeatureInfos.forEach(item => {
+          item.classList.remove('unfold')
+          item.classList.remove('fold')
+        })
+      }
+      this.dataListDragTmp = [...this.dataList]
+    },
+    end (event) {
+      if (event.oldIndex !== event.newIndex) {
+        this.$emit('moveGroupItem', this.dataList)
+        // 处理所有group数据后 调用上层移动 保存
+      }
+    },
+    move (event, orgin) {
+      const dragClass = document.querySelector('.drag-chart-class')// drag-chart-class:yellow chart-ghost:green  fallback-class choose-class:purple
+
+      const chartTitle = dragClass.querySelector('.chartTitle')
+      chartTitle.style.background = '#d8dce1'
+    },
+    clone (event) {
+      const canvas = event.item.querySelector('canvas')
+      const canvasclone = event.clone.querySelector('canvas')
+      canvasclone.style.border = 'solid 1px yellow'
+      if (canvas && canvasclone) {
+        const image = new Image()
+        image.src = canvas.toDataURL()
+        const ctxClone = canvasclone.getContext('2d')
+        // ctxClone.drawImage(image,0,0);
+        image.onload = function () {
+          ctxClone.drawImage(image, 0, 0)
+        }
+      }
+    },
+    dragPosition (e) {
+      const odiv = e// 目标元素e.target
+      // var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
+      // 得到点击时该容器的：
+      /* const startY = e.clientY
+        const startX = e.clientX
+        const _this = this */
+      // 鼠标相对元素的位置
+      const distY = e.clientY - odiv.offsetLeft
+      const distX = e.clientX - odiv.offsetTop
+      document.onmousemove = function (e) {
+        e.preventDefault()
+        const left = e.clientX - distX
+        const top = e.clientY - distY
+        odiv.style.top = top + 'px'
+        odiv.style.left = left + 'px'
+      }
+
+      document.onmouseup = function () {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    },
+    handleDragStart (e, item) {
+      this.dragging = item
+    },
+    handleDragEnd (e, item) {
+      this.dragging = null
+    },
+    // 首先把div变成可以放置的元素，即重写dragenter/dragover
+    handleDragOver (e) {
+      e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
+    },
+    handleDragEnter (e, item) {
+      e.dataTransfer.effectAllowed = 'move'// 为需要移动的元素设置dragstart事件
+      if (item === this.dragging) {
+        return
+      }
+      const newItems = [...this.dataList]
+      const src = newItems.indexOf(this.dragging)
+      const dst = newItems.indexOf(item)
+
+      newItems.splice(dst, 0, ...newItems.splice(src, 1))
+
+      this.dataList = newItems
+    },
+    initCurrentRecordNum () {
+      this.currentRecordNum = 0
+    },
+    cleanData () {
+      this.dataList = []
+      this.chartDataCacheGroup.clear()
+    },
+    initData (filter) {
+      this.cleanData()
+      // 内含 panelId,开始时间,结束时间
+      this.filter = filter
+      this.pagePanelId = this.filter.panelId
+      this.getData(this.filter)
+    },
+    searchCharts (searchName, group) {
+      // this.dataList = [];
+      // this.dataTotalList = [];
+      const chartListTmp = []
+      if (searchName && searchName.trim() !== '') {
+        this.dataTotalListBak.forEach((item) => {
+          if (item.name.indexOf(searchName) > -1 || group.name.indexOf(searchName) > -1) {
+            item.isLoaded = false
+            item.isHide = false
+            chartListTmp.push(item)
+          } else {
+            item.isLoaded = true
+            item.isHide = true
+            chartListTmp.push(item)
+          }
+        })
+      } else {
+        this.dataTotalListBak.forEach((item) => {
+          item.isLoaded = false
+          item.isHide = false
+          chartListTmp.push(item)
+        })
+      }
+
+      this.dataTotalList = [...chartListTmp]
+      this.dataList = [...this.dataTotalList]
+
+      this.$nextTick(() => {
+        if (this.dataList.length > 0) {
+          this.dataList.forEach((item, index) => {
+            this.$refs['editChart' + item.id][0].showLoad(item)// 之后要实现
+            this.setChartSize(item, index)// 设置该图表宽度
+            if (!item.isLoaded) {
+              // 获得当前显示在浏览器的图表，从后台获取数据
+              const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
+              this.handleElementInViewport(chartBox, 0, item, index, true)
+            }
+          })
+        }
+      })
+    },
+    pageDataList (isAdd, panelId, isSearch) {
+      if (panelId !== this.pagePanelId) {
+        this.currentRecordNum = 0
+      }
+      if (this.dataTotalList && this.dataTotalList.length > 0) {
+        if (this.currentRecordNum >= this.dataTotalList.length) {
+          // alert('数据加载完毕！');
+        } else {
+          const dataTmpList = []
+          let spanSum = 0
+          let line = 0// 行数
+          let isDataFull = false
+          const curRecNum = this.currentRecordNum
+          const len = this.dataTotalList.length
+          for (let i = curRecNum; !isDataFull && i < len; i++) {
+            if (line < this.lineNum) {
+              const item = this.dataTotalList[i]
+              const span = item.span
+              const sumTmp = spanSum + span
+              if (sumTmp <= 12) {
+                spanSum = sumTmp
+              } else { // 大于12表示够1行了，
+                line = line + 1
+                spanSum = span
+              }
+              if (line < this.lineNum) {
+                dataTmpList.push(item)
+                this.currentRecordNum = i + 1
+              } else {
+                this.currentRecordNum = i
+                break
+              }
+            } else { // 数据加载够了
+              isDataFull = true
+              this.currentRecordNum = i
+              break
+            }
+          }
+          if (isAdd) {
+            const oldDataListLen = this.dataList.length
+            const dataListTmp = [...this.dataList]
+            this.dataList = [...dataListTmp.concat(dataTmpList)]
+            this.$nextTick(() => {
+              this.dataSetFirst(dataTmpList, oldDataListLen, isSearch)
+            })
+          } else {
+            this.dataList = [...dataTmpList]
+          }
+        }
+      }
+    },
+
+    // 获取panel详情数据,获取panel下所有chart列表
+    getData (params) {
+      this.dataList.forEach((item, index) => {
+        // this.getChartData(item, index, this.filter)
+        item.i = item.id
+        this.setChartSize(item, index)
+        const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
+        this.handleElementInViewport(chartBox, 0, item, index, true)
+      })
+    },
+    loadChartData (scrollTop) {
+      if (this.dataList.length > 0) {
+        this.dataList.forEach((item, index) => {
+          this.setChartSize(item, index)
+          if (!item.isLoaded) {
+            // 获得当前显示在浏览器的图表，从后台获取数据
+            const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
+            this.handleElementInViewport(chartBox, scrollTop, item, index)
+          }
+          if (item.type === 'diagram') {
+            this.$refs['editChart' + item.id][0].resize()
+          }
+        })
+      }
+    },
+    // arr: 该panel下图表list,生成该看板下所有图表
+    dataSetFirst (arr, oldDataListLen, isSearch) {
+      if (arr.length) {
+        arr.forEach((item, index) => {
+          let realIndex = index
+          if (oldDataListLen) {
+            realIndex += oldDataListLen
+          }
+          const chartType = item.type
+          if (chartType !== 'url') {
+            if (isSearch) {
+              this.getChartDataForSearch(item, realIndex)
+            } else {
+              this.getChartData(item, realIndex)
+            }
+          } else {
+            if (!isSearch && this.$refs['editChart' + item.id] && this.$refs['editChart' + item.id][0]) {
+              this.$refs['editChart' + item.id][0].showLoad(item)
+            }
+            this.setChartSize(item, realIndex) // 设置该图表宽度
+          }
+        })
+      }
+    },
+    getChartDataForSearch (chartItem, realIndex) {
+      let chartData = this.chartDataCacheGroup.get(chartItem.id)
+      if (chartData) {
+        const filterType = chartData.filterType
+        const errorMsg = chartData.errorMsg
+        const tableData = chartData.tableData
+        const panelId = chartData.panelId
+        const filter = chartData.filter
+        const legend = chartData.legend
+        const series = chartData.series
+        const singleStatRlt = chartData.singleStatRlt
+        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+          if (chartItem.type === 'table') { // 表格
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                panelId, filter, filterType, errorMsg)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                panelId, filter, '', errorMsg)
+            }
+          } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                panelId, filter, legend, filterType, errorMsg)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                panelId, filter, legend, '', errorMsg)
+            }
+          } else if (chartItem.type === 'singleStat') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                this.filter.panelId, this.filter, filterType, errorMsg)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                this.filter.panelId, this.filter, '', errorMsg)
+            }
+          } else if (chartItem.type == 'text') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, filterType)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, '')
+            }
+          } else if (chartItem.type == 'logs') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, filterType)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, '')
+            }
+          }
+        }
+      } else {
+        this.getChartData(chartItem, realIndex)
+      }
+      chartData = null
+    },
+    // 获取一个图表具体数据,图表信息，图表位置index
+    getChartData (chartInfo, pos, filterType) {
+      const chartItem = chartInfo
+      if (chartItem.type === 'assetInfo') {
+        if (chartItem.from != this.$CONSTANTS.fromRoute.endpoint) {
+          this.$set(chartItem, 'draggable', true)
+          this.$set(chartItem, 'resizable', true)
+        }
+        this.getAssetInfoChartData(chartItem)
+        return
+      }
+      if (chartItem.type === 'endpointInfo') {
+        this.getEndpointInfoChartData(chartItem)
+        return
+      }
+      if (chartItem.type == 'projectInfo') {
+        chartItem.name = this.$t('project.chart.projectInfo')
+        this.getProjectInfoChartData(chartItem)
+        return
+      }
+      if (chartItem.type === 'alertList') {
+        this.getAlertListChartData(chartItem, filterType)
+        return
+      }
+      if (chartItem.type === 'alertRuleInfo') {
+        this.getAlertRuleChartData(chartItem)
+        return
+      }
+
+      if (chartItem.type == 'text') {
+        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, filterType)
+          } else {
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, '')
+          }
+        }
+        return
+      }
+      if (chartItem.type == 'logs') {
+        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, filterType)
+          } else {
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, '')
+          }
+        }
+        return
+      }
+
+      if (this.isModel) {
+        this.modelStaticData(chartInfo, filterType)
+      } else {
+        // 没有数据的设置提示信息暂无数据-针对每一个图
+        const len = chartItem.elements ? chartItem.elements.length : 0
+        if (len === 0) {
+          this.$nextTick(() => {
+            if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter)// ????怎么设置的无数据？？
+            }
+          })
+        } else {
+          let startTime = ''
+          let endTime = ''
+          if (filterType === 'refresh') { // 刷新
+            const now = new Date(bus.computeTimezone(new Date().getTime()))
+            const origin = new Date(this.filter.end_time)
+            const numInterval = now.getTime() - origin.getTime()
+            if (numInterval >= 60000) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
+              startTime = this.getNewTime(this.filter.start_time, numInterval)
+              endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
+            } else {
+              startTime = this.filter.start_time
+              endTime = this.filter.end_time
+            }
+          } else if (filterType === 'showFullScreen') { // 全屏时间查询
+            startTime = this.filter.start_time
+            endTime = this.filter.end_time
+            // this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
+          } else {
+            startTime = this.filter.start_time
+            endTime = this.filter.end_time
+          }
+
+          const step = bus.getStep(startTime, endTime)
+          this.$nextTick(() => {
+            const axiosArr = chartItem.elements.map((ele) => {
+              const filterItem = ele
+              let query = filterItem.expression
+              if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给null
+                chartInfo.param.nullType = chartInfo.param.nullType || 'null'
+                query += '&nullType=' + chartInfo.param.nullType
+              }
+              // if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
+              //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+              // }
+
+              if (this.from === fromRoute.chartTemp) {
+                return new Promise(resolve => resolve(chartTempData))
+              }
+              if (chartInfo.type == 'logs') {
+                return chartTempData
+              }
+              return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
+            })
+            // 一个图表的所有element单独获取数据
+            axios.all(axiosArr).then((res) => {
+              if (res.length > 0) {
+                const series = []
+                let singleStatRlt = ''
+                const legend = []
+                const tableData = []
+                /* let sumData = {
+                      name: 'sum',
+                      data: [],
+                      visible: true,
+                      threshold: null,
+                    }; */
+                let errorMsg = ''
+                let pieSeries
+                if (chartInfo.type === 'pie') {
+                  pieSeries = {
+                    type: 'pie',
+                    radius: '100%',
+                    center: ['50%', '50%'],
+                    top: '20%',
+                    bottom: '20%',
+                    // roseType: 'radius',
+                    minAngle: 10,
+                    itemStyle: {
+                      borderRadius: 5,
+                      borderColor: '#fff',
+                      borderWidth: 1
+                    },
+                    label: {
+                      show: false
+                    },
+                    emphasis: {
+                      label: {
+                        show: false
+                      }
+                    },
+                    data: []
+                  }
+                }
+                if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
+                  pieSeries = {
+                    type: 'bar',
+                    // roseType: 'radius',
+                    itemStyle: {
+                      borderRadius: 5,
+                      borderColor: '#fff',
+                      borderWidth: 1
+                    },
+                    label: {
+                      show: false
+                    },
+                    emphasis: {
+                      label: {
+                        show: false
+                      }
+                    },
+                    data: []
+                  }
+                }
+                res.forEach((response, innerPos) => {
+                  if (response.status === 'success') {
+                    errorMsg = ''
+                    if (response.data.result) {
+                      // 循环处理每个elements下获取的数据列
+                      if (chartItem.type === 'singleStat') {
+                        if (response.data.result.length === 1) {
+                          const statistics = chartItem.param.statistics || 'null'
+                          if (response.data.result[0].values) {
+                            singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values)
+                          }
+                        } else if (response.data.result.length > 1) {
+                          singleStatRlt = this.$t('dashboard.panel.singleStatErrorTip')
+                        }
+                      } else {
+                        response.data.result.forEach((queryItem, resIndex) => {
+                          let seriesItem = {
+                            theData: {
+                              name: '',
+                              symbol: 'emptyCircle', // 去掉点
+                              symbolSize: [2, 2],
+                              smooth: 0.2, // 曲线变平滑
+                              showSymbol: false,
+                              data: [],
+                              lineStyle: {
+                                width: 1,
+                                opacity: 0.9
+                              },
+                              animation: false,
+                              type: chartInfo.type
+                            },
+                            metric_name: ''
+                          }
+
+                          if (chartInfo.type === 'stackArea') {
+                            seriesItem.theData.type = 'line'
+                            seriesItem.theData.stack = chartInfo.name
+                            seriesItem.theData.areaStyle = { opacity: 0.3 }
+                          }
+                          if ((chartInfo.type === 'line' || chartInfo.type === 'stackArea' || chartInfo.type === 'bar') && chartInfo.param && chartInfo.param.threshold) {
+                            seriesItem.theData.markLine = {
+                              silent: true,
+                              symbol: ['circle', 'circle'],
+                              label: {
+                                distance: this.computeDistance(chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(chartInfo.param.threshold)),
+                                formatter (params) {
+                                  return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value)
+                                }
+                              },
+                              lineStyle: {
+                                color: '#d64f40',
+                                width: 2,
+                                type: 'dotted'
+                              },
+                              data: [{
+                                yAxis: Number(chartInfo.param.threshold)
+                              }]
+                            }
+                          }
+                          // 图表中每条线的名字,后半部分
+                          let host = ''// up,
+                          if (queryItem.metric.__name__) {
+                            host = `${queryItem.metric.__name__}{`// up,
+                          }
+                          const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+                          // 设置时间-数据格式对
+                          let tempArr = []
+                          let dpsArr = []
+                          tempArr = queryItem.values
+                          dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                          dpsArr = dpsArr.map(item => {
+                            return [item[0], [item[1][0], Number(item[1][1])]]
+                          })
+                          // 判断是否有数据, && tagsArr.length > 0
+                          if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                            tagsArr.forEach((tag, i) => {
+                              if (tag !== '__name__') {
+                                host += `${tag}="${queryItem.metric[tag]}",`
+                              }
+                            })
+                            if (host.endsWith(',')) {
+                              host = host.substr(0, host.length - 1)
+                            }
+                            if (queryItem.metric.__name__) {
+                              host += '}'
+                            }
+                            if (!host || host === '') {
+                              host = chartItem.elements[innerPos].expression
+                            }
+                            // 处理legend别名
+                            let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend)
+                            if (!alias || alias === '') {
+                              alias = host
+                            }
+                            legend.push({ name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex, alias: alias })
+                            // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+
+                            seriesItem.theData.name = host + '-' + chartItem.elements[innerPos].id + '-' + resIndex
+                            // alert(seriesItem.theData.name);
+                            seriesItem.metric_name = seriesItem.theData.name
+                            // 将秒改为毫秒
+                            // alert('table=='+JSON.stringify(queryItem))
+                            seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+                              /* 曲线汇总暂不需要
+                                  if (sumData.data[dpsIndex]) {
+                                    const sumNum = sumData.data[dpsIndex][1] || 0;
+                                    sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
+                                  } else {
+                                    sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
+                                  }
+                                  */
+                              // let t_date = new Date(dpsItem[0] * 1000);
+                              // let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
+                              tableData.push({ // 表格数据
+                                // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+                                // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+                                element: { element: host, alias: alias },
+                                // time: timeTmp,//采集时间
+                                // value: dpsItem[1],//数值
+                                data: [dpsItem[0] * 1000, dpsItem[1]]
+                              })
+                              return [dpsItem[0] * 1000, dpsItem[1]]
+                            })
+                            if (chartInfo.type === 'pie') {
+                              pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
+                            } else if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
+                              pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
+                            } else {
+                              series.push(seriesItem.theData)
+                              seriesItem = null
+                            }
+                          } else if (chartItem.elements && chartItem.elements[innerPos]) {
+                            // 无数据提示
+                            /*
+                                const currentInfo = chartItem.elements[innerPos];
+                                const errorMsg = `图表 ${chartItem.name} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
+                                this.$message.warning({
+                                  duration: 15,
+                                  content: errorMsg,
+                                  closable: true,
+                                });
+                                */
+                          }
+                        })
+                      }
+                    }
+                  } else {
+                    if (response.msg) {
+                      // this.$message.error(response.msg);
+                      errorMsg = response.msg
+                    } else if (response.error) {
+                      // this.$message.error(response.error);
+                      errorMsg = response.error
+                    } else {
+                      // this.$message.error(response);
+                      errorMsg = response
+                    }
+                  }
+                })
+                if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                  if (chartInfo.type === 'pie') {
+                    series.push(pieSeries)
+                  }
+                  if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
+                    series.push(pieSeries)
+                  }
+                  const chartData = {
+                    chartItem: chartItem,
+                    series: series,
+                    singleStatRlt: singleStatRlt,
+                    legend: legend,
+                    tableData: tableData,
+                    panelId: this.filter.panelId,
+                    filter: this.filter,
+                    filterType: filterType,
+                    errorMsg: errorMsg
+                  }
+                  this.chartDataCacheGroup.set(chartInfo.id, chartData)
+                  if (chartItem.type === 'table') { // 表格
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                        this.filter.panelId, this.filter, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                        this.filter.panelId, this.filter, '', errorMsg)
+                    }
+                  } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type == 'pie') {
+                    if (series.length && chartItem.type === 4) { // 曲线汇总
+                      // series.push(sumData);//后续需要
+                    }
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                        this.filter.panelId, this.filter, legend, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                        this.filter.panelId, this.filter, legend, '', errorMsg)
+                    }
+                  } else if (chartItem.type === 'singleStat') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, '', errorMsg)
+                    }
+                  } else if (chartItem.type === 'logs') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, '', errorMsg)
+                    }
+                  }
+                }
+              } else {
+                const type = chartItem.type
+                if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                  if (type === 'table') {
+                    if (filterType === 'showFullScreen') { // table的全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter)
+                    }
+                  } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
+                    if (filterType === 'showFullScreen') { // table的全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter)
+                    }
+                  } else if (chartItem.type === 'singleStat') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter)
+                    }
+                  } else if (chartItem.type === 'logs') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter)
+                    }
+                  }
+                }
+              }
+            }).catch((error) => {
+              if (error) {
+                this.$message.error(error.toString())
+                console.error(error)
+              }
+            })
+          })
+        }
+      }
+    },
+    computeDistance (str) {
+      const span = document.querySelector('.temp-dom')
+      if (span) {
+        span.textContent = str
+        const txtWidth = parseFloat(window.getComputedStyle(span).width)
+        return Number('-' + (txtWidth + 5))
+      }
+    },
+    modelStaticData (chartInfo, filterType) {
+      const series = []
+      const legend = []
+      const tableData = []
+      const singleStatRlt = 999
+      if (chartInfo.type === 'singleStat') {
+        // const statistics = chartInfo.param.statistics
+      } else {
+        const seriesItem = {
+          theData: {
+            name: '',
+            symbol: 'emptyCircle', // 去掉点
+            symbolSize: [2, 2],
+            smooth: 0.2, // 曲线变平滑
+            showSymbol: false,
+            data: [],
+            lineStyle: {
+              width: 1,
+              opacity: 0.9
+            },
+            type: chartInfo.type
+          },
+          // visible: true,
+          // threshold: null,
+          metric_name: ''
+        }
+        if (chartInfo.type === 'stackArea') {
+          seriesItem.theData.type = 'line'
+          seriesItem.theData.stack = chartInfo.name
+          seriesItem.theData.areaStyle = { opacity: 0.3 }
+        }
+        // 图表中每条线的名字,后半部分
+        let host = 'host'// up,
+        const queryItem = { metric: { item1: 'item1', item2: 'item2', item3: 'item3' }, values: [] }
+        const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+        // 设置时间-数据格式对
+        const tempArr = []
+        const dpsArr = []
+        const timeStamp = Math.floor(new Date().getTime() / 1000)
+        for (let i = 0; i < 20; i++) {
+          tempArr.push([timeStamp - (20 - i) * 15, Math.floor(Math.random() * 10) + ''])
+          queryItem.values.push(tempArr[i])
+          dpsArr.push([i + '', tempArr[i]])
+        }
+        // 判断是否有数据, && tagsArr.length > 0
+        if (dpsArr.length > 0 && this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
+          tagsArr.forEach((tag, i) => {
+            if (tag !== '__name__') {
+              host += `${tag}="${queryItem.metric[tag]}",`
+            }
+          })
+          if (queryItem.metric.__name__) {
+            host += '}'
+          }
+          // 处理legend别名
+          let alias = this.$refs['editChart' + chartInfo.id][0].dealLegendAlias(host, chartInfo.elements[0].legend)
+          if (!alias || alias === '') {
+            alias = host
+          }
+          legend.push({ name: host, alias: alias })
+          // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+          seriesItem.theData.name = host
+          // alert(seriesItem.theData.name);
+          seriesItem.metric_name = seriesItem.theData.name
+          // 将秒改为毫秒
+          // alert('table=='+JSON.stringify(queryItem))
+          seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+            const tData = new Date(dpsItem[0] * 1000)
+            const timeTmp = bus.timeFormate(tData, 'yyyy-MM-dd hh:mm:ss')
+            tableData.push({ // 表格数据
+              // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+              // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+              element: { element: host, alias: alias },
+              time: timeTmp, // 采集时间
+              value: dpsItem[1]// 数值
+            })
+            return [dpsItem[0] * 1000, dpsItem[1]]
+          })
+          series.push(seriesItem.theData)
+        }
+      }
+      if (this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
+        const errorMsg = ''
+        const chartData = {
+          chartItem: chartInfo,
+          series: series,
+          singleStatRlt: singleStatRlt,
+          legend: legend,
+          tableData: tableData,
+          panelId: this.filter.panelId,
+          filter: this.filter,
+          filterType: filterType,
+          errorMsg: errorMsg
+        }
+        this.chartDataCacheGroup.set(chartInfo.id, chartData)
+        if (chartInfo.type === 'table') { // 表格
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
+              this.filter.panelId, this.filter, filterType, '')
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
+              this.filter.panelId, this.filter, '', '')
+          }
+        } else if (chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 4) {
+          if (series.length && chartInfo.type === 4) { // 曲线汇总
+            // series.push(sumData);//后续需要
+          }
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
+              this.filter.panelId, this.filter, legend, filterType, errorMsg)
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
+              this.filter.panelId, this.filter, legend, '', errorMsg)
+          }
+        } else if (chartInfo.type === 'singleStat') {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, filterType, errorMsg)
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, '', errorMsg)
+          }
+        } else if (chartInfo.type === 'logs') {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, filterType, errorMsg)
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, '', errorMsg)
+          }
+        }
+      }
+    },
+    getEndpointInfoChartData (chartInfo) {
+      const detail = []
+      this.$refs['editChart' + chartInfo.id][0].showLoad()
+      chartInfo.name = this.$t('project.chart.endpointInfo')
+
+      const basicInfo = JSON.parse(JSON.stringify(this.detail))
+      const basicInfoReq = new Promise((resolve, reject) => {
+        const now = new Date()
+        const startTime = bus.timeFormate(new Date(now).setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
+        // const step = bus.getStep(startTime, endTime)
+        this.$nextTick(() => {
+          let query = chartInfo.elements[0].expression
+          if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea') && chartInfo.param) {
+            chartInfo.param.nullType = chartInfo.param.nullType || 'null'
+            query += '&nullType=' + chartInfo.param.nullType
+          }
+          this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=5m').then(response => {
+            if (response.status === 'success') {
+              if (response.data.result) {
+                const series = {
+                  name: '',
+                  symbol: 'emptyCircle', // 去掉点
+                  symbolSize: 4,
+                  smooth: 0.2, // 曲线变平滑
+                  showSymbol: false,
+                  data: [],
+                  type: 'line',
+                  lineStyle: {
+                    width: 1,
+                    opacity: 0.9
+                  },
+                  itemStyle: {
+                    color (params) {
+                      if (params.data[1] == '1') {
+                        return '#50d050'
+                      } else {
+                        return '#d64f40'
+                      }
+                    }
+                  }
+                }
+                response.data.result.forEach((queryItem, resInnerPos) => {
+                  // 将秒改为毫秒
+                  series.data = queryItem.values.map((dpsItem, dpsIndex) => {
+                    return [dpsItem[0] * 1000, dpsItem[1]]
+                  })
+                })
+                basicInfo.stateSeries = [series]
+                basicInfo.state = ''
+                resolve({ title: this.$t('project.chart.basicTitle'), data: basicInfo, type: 'endpointInfo' })
+              }
+            }
+          })
+        })
+      })
+
+      const endpointId = this.additionalInfo.id
+      const alertMsg = new Promise((resolve, reject) => {
+        this.$get('/alert/message?endpointId=' + endpointId + '&state=1&pageSize=-1').then(response => {
+          if (response.code == 200) {
+            const alerts = {}
+            if (response.data) {
+              response.data.list.forEach(t => {
+                const alertRule = t.alertRule.alertName
+                if (alerts[alertRule]) {
+                  alerts[alertRule]++
+                } else {
+                  alerts[alertRule] = 1
+                }
+              })
+            }
+            resolve({ title: this.$t('overall.alert'), data: alerts })
+          }
+        })
+      })
+      Promise.all([basicInfoReq, alertMsg]).then(resolves => {
+        resolves.forEach(t => detail.push(t))
+        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail)
+      })
+    },
+    getAssetInfoChartData (chartInfo) {
+      const vm = this
+      chartInfo.name = this.$t('asset.assetInfo')
+      const detail = []
+      if (!this.isModel) {
+        this.$refs['editChart' + chartInfo.id][0].showLoad()
+        const assetId = this.additionalInfo.assetId ? this.additionalInfo.assetId : this.additionalInfo.id
+        this.$get('/asset/info?id=' + assetId).then(response => {
+          if (response.code == 200) {
+            response.data && (function () {
+              response.data.Basic && detail.push({
+                title: vm.$t('project.chart.basicTitle'),
+                type: 'basic',
+                data: response.data.Basic
+              })
+              response.data.Attribute && detail.push({
+                title: vm.$t('asset.featureTitle'),
+                type: 'attribute',
+                data: response.data.Attribute
+              })
+            }())
+          }
+          this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
+        })
+      } else {
+        detail.push({
+          title: vm.$t('project.chart.basicTitle'),
+          type: 'basic',
+          data: {
+            sn: 'assetInfo Test',
+            host: '192.168.40.42',
+            pingStatus: 1,
+            pingRtt: 80,
+            cpuNum: '8',
+            memery: '12GB',
+            memery$_$free: '3GB'
+          }
+        })
+        detail.push({
+          title: vm.$t('asset.featureTitle'),
+          type: 'feature',
+          data: {
+            CPU: 'Intel E500',
+            Memory: '256GB',
+            NetworkInterface: ['eth0', 'eth1'],
+            Disk: [{
+              mount: '/',
+              total: '256GB',
+              free: '128GB',
+              usageRate: '50%'
+            }]
+          }
+        })
+        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
+      }
+    },
+    getProjectInfoChartData (chartInfo) {
+      const vm = this
+      const detail = []
+      if (!this.isModel) {
+        this.$refs['editChart' + chartInfo.id][0].showLoad(chartInfo)
+        this.$get('/project/info?id=' + this.additionalInfo.id).then(response => {
+          if (response.code == 200) {
+            response.data && (function () {
+              response.data.basic && detail.push({
+                title: vm.$t('project.chart.basicTitle'),
+                data: response.data.basic,
+                type: 'project'
+              })
+              response.data.module && (function () {
+                response.data.module.forEach(d => {
+                  detail.push({
+                    title: `${vm.$t('project.module.module')}：${d.name}`,
+                    data: d,
+                    type: 'module'
+                  })
+                })
+              }())
+            }())
+          }
+          this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter, response.msg)
+        })
+      } else {
+        detail.push({
+          title: 'system',
+          data: {
+            id: 1,
+            name: 'system',
+            remark: '描述信息',
+            alertStat: [1, 2, 3]
+          }
+        })
+        detail.push({
+          title: `${this.$t('project.module.module')}：kafka`,
+          data: {
+            id: 1,
+            name: 'kafka',
+            type: 'http',
+            remark: '描述信息',
+            endpointStat: [3, 23],
+            alertStat: [2, 3, 4]
+          }
+        })
+        detail.push({
+          title: `${this.$t('project.module.module')}：kafkakafkakafkakafkakafkakafkakafka`,
+          data: {
+            id: 2,
+            name: 'kafkakafkakafkakafkakafkakafkakafka',
+            type: 'http',
+            remark: '描述信息',
+            endpointStat: [3, 23],
+            alertStat: [2, 0, 4]
+          }
+        })
+        detail.push({
+          title: `${this.$t('project.module.module')}：kafkakafka`,
+          data: {
+            id: 3,
+            name: 'kafkakafka',
+            type: 'snmp',
+            remark: '描述信息',
+            endpointStat: [3, 0],
+            alertStat: [2, 3, 4]
+          }
+        })
+        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
+      }
+    },
+    getAlertListChartData (chartInfo, filterType) {
+      if (this.additionalInfo) {
+        this.$set(chartInfo, 'param', { endpointId: this.additionalInfo.id })
+      }
+      this.$refs['editChart' + chartInfo.id][0].getAlertList(filterType)
+    },
+    getAlertRuleChartData (chartInfo) {
+      const vm = this
+      const detail = []
+      const req = new Promise((resolve, reject) => {
+        this.$get('alert/rule/stat?id=' + this.additionalInfo.id).then(response => {
+          if (response.code == 200) {
+            response.data && (function () {
+              if (response.data.project && response.data.project.length > 0) {
+                detail.push({ title: vm.$t('overall.entity'), data: convert(response.data.project) })
+              }
+              /* if (response.data.module && response.data.module.length > 0) {
+                    detail.push({title: vm.$t("project.module.module"), data: convert(response.data.module)});
+                  }
+                  if (response.data.endpoint && response.data.endpoint.length > 0) {
+                    detail.push({title: vm.$t("project.endpoint.endpoint"), data: convert(response.data.endpoint)});
+                  } */
+              if (response.data.asset && response.data.asset.length > 0) {
+                detail.push({ title: vm.$t('asset.asset'), data: convert(response.data.asset) })
+              }
+            }())
+            resolve(true)
+          }
+        })
+      })
+      req.then(result => {
+        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail)
+      })
+
+      function convert (d) {
+        const data = {}
+        d.forEach(item => {
+          data[item.name] = item.nums
+          !data._module_ && (data._module_ = {})
+          if (item.module && item.module instanceof Array && item.module.length > 0) {
+            data._module_[item.name] = {}
+            item.module.forEach(m => {
+              data._module_[item.name][m.name] = m.nums
+              !data._module_[item.name]._endpoint_ && (data._module_[item.name]._endpoint_ = {})
+              if (m.endpoint && m.endpoint instanceof Array && m.endpoint.length > 0) {
+                data._module_[item.name]._endpoint_[m.name] = {}
+                m.endpoint.forEach(e => {
+                  data._module_[item.name]._endpoint_[m.name][e.name] = e.nums
+                })
+              }
+            })
+          }
+        })
+        return data
+      }
+    },
+
+    // 设置图表的尺寸
+    setChartSize (item, index) {
+      this.$nextTick(() => {
+        const chartBox = document.getElementById('chart-' + item.id)
+        if (chartBox) {
+          chartBox.style.width = `${(item.span / 12) * 100}%`
+          chartBox.style.height = `${document.getElementById('listContainer' + item.groupId).offsetWidth / 12 * item.height}px`
+        }
+      })
+    },
+    getNewTime (time, num) {
+      const date = new Date(time)
+      const newDate = new Date(parseInt(date.getTime(), 10) + num)
+      return bus.timeFormate(newDate, 'yyyy-MM-dd hh:mm:ss')
+    },
+    // 删除图表
+    removeChart (chartId) { // from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
+      const chart = this.dataList.find(item => item.id === chartId)
+      if (chart) {
+        this.$emit('on-remove-group-chart', chart)
+      }
+    },
+    // 复制图表
+    duplicateChart (chartId) {
+      const chart = this.dataList.find(item => item.id === chartId)
+      if (chart) {
+        this.$emit('on-duplicate-group-chart', chart)
+      }
+    },
+    // 编辑图表
+    editData (chartId) {
+      // 获取该id下chart的相关信息
+      const chart = this.dataList.find(item => item.id === chartId)
+      if (chart) {
+        this.$emit('on-edit-group-chart', chart)
+      }
+    },
+
+    editChartForDrag (chartItem) {
+      const chart = this.dataList.find(item => item.id === chartItem.id)
+      chart.span = chartItem.span
+      chart.height = chartItem.height
+    },
+    // 刷新列表中的一个图表
+    refreshChart (chartId, searchTime) {
+      this.dataList.forEach((item, index) => {
+        if (item.id === chartId) {
+          this.getChartData(item, index, 'refresh')
+        }
+      })
+    },
+    refresh () {
+      this.dataList.forEach((item, index) => {
+        this.getChartData(item, index, this.filter)
+      })
+    },
+    resize () {
+      this.dataList.forEach((item, index) => {
+        if (item.isHide) {
+          return
+        }
+        if (this.$refs['editChart' + item.id][0].chartResize) {
+          this.$refs['editChart' + item.id][0].chartResize()
+        } else if (this.$refs['editChart' + item.id][0].resize) {
+          this.$refs['editChart' + item.id][0].resize()
+        }
+      })
+    },
+    searchData (chartId, searchTime) {
+      if (searchTime) { // 全屏时间查询
+        this.filter.start_time = bus.timeFormate(searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+        this.filter.end_time = bus.timeFormate(searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      }
+      this.dataList.forEach((item, index) => {
+        if (item.id === chartId) {
+          this.getChartData(item, index, 'showFullScreen')
+        }
+      })
+    },
+    // 懒加载，判断网页区域，加载可见区的prom数据
+    handleElementInViewport (ele, scrollTop, item, index, isSearch) {
+      /*
+          网页被卷去的高：document.body.scrollTop
+          网页正文全文高：document.body.scrollHeight
+          网页可见区域高（包括边线的高）：document.body.offsetHeight；
+          网页可见区域高：document.body.clientHeight
+          */
+      const that = this
+      setTimeout(function () {
+        const itemHeight = item.height
+        // 1.元素距离页面顶部的距离 + group的高度
+        const groupHeight = item.groupId ? document.getElementById('chart-' + item.groupId).offsetTop : 0
+        const mainOffsetTop = ele.offsetTop + groupHeight// offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
+        // 2.元素的高度
+        const mainHeight = itemHeight// ele.offsetHeight;//itemHeight;
+        // 3.页面滚动的距离
+        const windowScrollTop = scrollTop// document.documentElement.scrollTop || document.body.scrollTop;
+        // 4.浏览器可见区域的高度
+        const windowHeight = (window.innerHeight || document.documentElement.clientHeight) - 50 - 42
+
+        /*
+            * 在窗口上下滚动的情况下, 一个页面元素的状态有下面3种：
+            1.向上滚动超出可见区域
+            2.向下滚动超出可视区域
+            3.在可视区域内
+            * 第一种情况   由于元素随页面向上滚动, 整个页面滚动的距离  大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出
+            * 第二种情况   由于元素随页面向下滚动, 整个页面滚动的距离  小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出
+            * */
+        /* console.log("___isInView____","元素距离页面顶部的距离mainOffsetTop="+mainOffsetTop)//不变
+            console.log("___isInView____","元素高度mainHeight="+mainHeight)//不变
+            console.log("___isInView____","scrollTop页面滚动的距离windowScrollTop="+windowScrollTop)//变
+            console.log("___isInView____","浏览器可见区域高度windowHeight="+windowHeight)//不变
+            console.log(item.name,(mainOffsetTop+mainHeight/3),"<",(windowScrollTop+windowHeight),((mainOffsetTop+mainHeight/3) < (windowScrollTop+windowHeight))) */
+        if ((mainOffsetTop + mainHeight / 3) < (windowScrollTop + windowHeight)) {
+          const chartType = item.type
+          item.isLoaded = true
+          if (chartType !== 'url') {
+            that.getChartDataForSearch(item, index)
+          } else {
+            that.$refs['editChart' + item.id][0].showLoad(item)
+          }
+        }
+      }, 500)
+    },
+    chartBySync (item) {
+      this.$post('visual/panel/chart/syncTmpl', { ids: [item.id] }).then(res => {
+        if (res.code === 200) {
+          this.getData(this.filter)
+          this.$message.success(this.$t('tip.syncSuccess'))
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    }
+  },
+  created () {
+    this.chartDataCacheGroup = new Map()
+  },
+  mounted () {
+    this.tempDomInit()
+  }
+
+}
+
+</script>
+<style>
+  .droppable-element {
+    width: 150px;
+    text-align: center;
+    background: #fdd;
+    border: 1px solid black;
+    margin: 10px 0;
+    padding: 10px;
+  }
+</style>
diff --git a/nezha-fronted/src/components/chart/chart-list-group.vue b/nezha-fronted/src/components/chart/chart-list-group.vue
new file mode 100644
index 000000000..c9b85584e
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart-list-group.vue
@@ -0,0 +1,1596 @@
+<style scoped>
+  .chartBox {
+    float:left;
+    padding: 0 10px 10px 0;
+    position:relative;
+    box-sizing: border-box;
+  }
+  .noData{
+    text-align: center
+  }
+  .list-width{
+    width: calc(100% - 2px);
+    padding: 5px 10px 5px 0;
+    box-sizing: border-box;
+    overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
+  }
+</style>
+<template>
+  <div :id="'listContainer' + groupId"  ref="listContainer" class="list-width chart-group"><!--v-drag-->
+
+    <draggable v-model="dataList" :disabled="panelLock" :move="move" :options="{
+                 group:{name:'chartGroup',pull:'false'},
+                 dragClass:'drag-chart-class',
+                 fallbackClass:'fallback-class',
+                 forceFallback:true,
+                 ghostClass:'chart-ghost',
+                 chosenClass:'choose-class',
+                 scroll:true,
+                 filter: '.drag-disabled',
+                 scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
+                 animation: 150,
+                 handle: '.chart-title'
+               }" :scroll-sensitivity="150"
+               style="width: 100%;height: 100%"
+               @end="end"
+    @start="start">
+      <div v-for="(item, index) in dataList" v-show="!item.isHide" :id="'chart-' + item.id" :key="item.id" :ref="'chart' + item.id" :class="{'drag-disabled': !draggable,'chartBox':true}" :name="item.name" :style="{marginBottom: extraMarginBottom}">
+        <line-chart-block v-if="item.type === 'line' || (item.type === 'bar' && (!item.param.statistics || item.param.statistics === 'null')) ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
+                          :ref="'editChart'+item.id" :chart-data="item" :chart-index="item.id"
+                          :from="from"
+                          :is-lock="panelLock"
+                          :panel-id="filter.panelId"
+                          :temp-dom="tempDom"
+                          @sync="()=>{chartBySync(item)}"
+                          @on-refresh-data="refreshChart"
+                          @on-remove-chart-block="removeChart"
+                          @on-duplicate-chart-block="duplicateChart"
+                          @on-drag-chart="editChartForDrag"
+                          @on-edit-chart-block="editData"
+                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+        ></line-chart-block>
+
+        <logs v-if="item.type === 'logs'" :key="'inner' + item.id"
+              :ref="'editChart'+item.id" :chart-data="item" :chart-index="item.id"
+              :endTime="filter.end_time" :from="from"
+              :is-lock="panelLock"
+              :panel-id="filter.panelId"
+              :startTime="filter.start_time"
+              :temp-dom="tempDom"
+              @sync="()=>{chartBySync(item)}"
+              @on-refresh-data="refreshChart"
+              @on-remove-chart-block="removeChart"
+              @on-duplicate-chart-block="duplicateChart"
+              @on-drag-chart="editChartForDrag"
+              @on-edit-chart-block="editData"
+              @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></logs>
+
+        <chart-single-stat  v-if="item.type === 'singleStat'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                     :chart-index="item.id"
+                     :from="from"
+                     :is-lock="panelLock"
+                     :panel-id="filter.panelId"
+                     @sync="()=>{chartBySync(item)}"
+                     @on-refresh-data="refreshChart"
+                            @on-search-data="searchData"
+                     @on-remove-chart-block="removeChart"
+                     @on-duplicate-chart-block="duplicateChart"
+                     @on-drag-chart="editChartForDrag"
+                     @on-edit-chart-block="editData"
+                     @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chart-single-stat>
+
+        <chart-table  v-if="item.type === 'table'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                      :chart-index="item.id"
+                      :from="from"
+                      :is-lock="panelLock"
+                      :panel-id="filter.panelId"
+                      @sync="()=>{chartBySync(item)}"
+                      @on-refresh-data="refreshChart"
+                      @on-search-data="searchData"
+                      @on-remove-chart-block="removeChart"
+                      @on-duplicate-chart-block="duplicateChart"
+                      @on-drag-chart="editChartForDrag"
+                      @on-edit-chart-block="editData"
+                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chart-table>
+
+        <chart-url  v-if="item.type === 'url'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                     :chart-index="item.id"
+                     :from="from"
+                     :is-lock="panelLock"
+                     :panel-id="filter.panelId"
+                     @sync="()=>{chartBySync(item)}"
+                    @on-refresh-data="refreshChart"
+                     @on-search-data="searchData"
+                    @on-remove-chart-block="removeChart"
+                     @on-duplicate-chart-block="duplicateChart"
+                     @on-drag-chart="editChartForDrag"
+                      @on-edit-chart-block="editData"
+                     @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chart-url>
+
+        <chart-detail  v-if="item.type === 'assetInfo' || item.type == 'projectInfo' || item.type == 'endpointInfo' || item.type == 'alertRuleInfo'" :key="'inner' + item.id" :ref="'editChart'+item.id"
+                          :chart-data="item" :chart-index="item.id"
+                          :editChartId="'editChartId' + item.id"
+                          :from="from"
+                          :is-lock="panelLock"
+                          :panel-id="filter.panelId"
+                          @on-refresh-data="refreshChart"
+                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+        ></chart-detail>
+
+        <text-chart v-if="item.type === 'text'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                    :chart-index="item.id"
+                    :from="from"
+                    :is-lock="panelLock"
+                    :panel-id="filter.panelId"
+                    @sync="()=>{chartBySync(item)}"
+                    @on-refresh-data="refreshChart"
+                    @on-remove-chart-block="removeChart"
+                    @on-duplicate-chart-block="duplicateChart"
+                    @on-drag-chart="editChartForDrag"
+                    @on-edit-chart-block="editData"
+                    @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+        ></text-chart>
+
+        <diagramChart v-if="item.type === 'diagram'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item"
+                      :chart-index="index"
+                      :from="from"
+                      :is-lock="panelLock"
+                      :panel-id="filter.panelId"
+                      @sync="()=>{chartBySync(item)}"
+                      @on-refresh-data="refreshChart"
+                      @on-remove-chart-block="removeChart"
+                      @on-duplicate-chart-block="duplicateChart"
+                      @on-drag-chart="editChartForDrag"
+                      @on-edit-chart-block="editData"
+                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+        ></diagramChart>
+
+        <chart-alert-list  v-if="item.type  === 'alertList'" :ref="'editChart'+item.id"
+                           :chart-index="item.id"
+                          :chart-info="item"
+                          :chartData="item"
+                          :editChartId="'editChartId' + item.id"
+                           :from="from"
+                          :is-lock="panelLock"
+                           :panel-id="filter.panelId"
+                          @sync="()=>{chartBySync(item)}"
+                          @on-refresh-data="refreshChart"
+                          @on-search-data="searchData"
+                          @on-remove-chart-block="removeChart"
+                          @on-duplicate-chart-block="duplicateChart"
+                          @on-drag-chart="editChartForDrag"
+                           @on-edit-chart-block="editData"
+                          @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+        ></chart-alert-list>
+        <chartBarStatis  v-if="(item.type === 'bar'&& item.param.statistics && item.param.statistics !== 'null')" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item" :chart-index="item.id"
+                         :from="from"
+                         :is-lock="panelLock"
+                         :panel-id="filter.panelId"
+                         :temp-dom="tempDom"
+                         @sync="()=>{chartBySync(item)}"
+                         @on-refresh-data="refreshChart"
+                         @on-search-data="searchData"
+                         @on-remove-chart-block="removeChart"
+                         @on-duplicate-chart-block="duplicateChart"
+                         @on-drag-chart="editChartForDrag"
+                         @on-edit-chart-block="editData"
+                         @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chartBarStatis>
+        <chart-pie  v-if="item.type === 'pie'" :key="'inner' + item.id" :ref="'editChart'+item.id" :chart-data="item" :chart-index="item.id"
+                            :from="from"
+                            :is-lock="panelLock"
+                            :panel-id="filter.panelId"
+                            :temp-dom="tempDom"
+                            @sync="()=>{chartBySync(item)}"
+                            @on-refresh-data="refreshChart"
+                    @on-search-data="searchData"
+                            @on-remove-chart-block="removeChart"
+                            @on-duplicate-chart-block="duplicateChart"
+                            @on-drag-chart="editChartForDrag"
+                            @on-edit-chart-block="editData"
+                            @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"></chart-pie>
+      </div>
+   </draggable>
+    <el-row v-if="dataList.length === 0"  class="noData"></el-row>
+    <!--<div class="page-shadow" v-if="showShadow"></div>-->
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import bus from '../../libs/bus'
+import lineChartBlock from './line-chart-block'
+import chartTable from './chart-table'
+import chartUrl from './chart-url'
+import chartSingleStat from './chart-single-stat'
+import chartDetail from './chart-detail'
+import draggable from 'vuedraggable'
+import chartDataFormat from './chartDataFormat'
+import chartAlertList from './chart-alert-list'
+import textChart from './text-chart'
+import diagramChart from './diagram-chart'
+import chartPie from './chart-pie'
+import chartBarStatis from './chart-bar-statistics'
+import logs from './logs'
+import { fromRoute } from '@/components/common/js/constants'
+import chartTempData from '@/components/charts/chartTempData'
+// import visNetwork from './visNetwork'
+export default {
+  name: 'chartList',
+  props: {
+    isModel: { type: Boolean, default: false },
+    additionalInfo: {},
+    draggable: { type: Boolean, default: true },
+    detail: Object,
+    from: { type: String },
+    panelLock: { type: Boolean, default: false },
+    hasGroup: { type: Boolean, default: true },
+    groupList: {},
+    filterParent: {},
+    groupId: {}
+  },
+
+  components: {
+    chartAlertList,
+    chartDetail,
+    lineChartBlock,
+    chartTable,
+    chartUrl,
+    chartSingleStat,
+    draggable,
+    textChart,
+    chartPie,
+    chartBarStatis,
+    diagramChart,
+    logs
+    // visNetwork,
+  },
+  watch: {
+    groupList: {
+      immediate: true,
+      handler (n) {
+        this.dataList = [...n]
+        this.dataTotalListBak = [...n]
+        this.$nextTick(() => {
+          this.dataList.forEach((item, index) => {
+            // this.getChartData(item, index, this.filter)
+            this.setChartSize(item, index)
+            const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
+            this.handleElementInViewport(chartBox, 0, item, index, true)
+          })
+        })
+      }
+    },
+    filterParent: {
+      immediate: true,
+      handler (n) {
+        this.filter = { ...n }
+        this.pagePanelId = this.filter.panelId
+      }
+    }
+  },
+  data () {
+    return {
+      filter: {},
+      dataList: [], // 看板中所有图表信息
+      dataListDragTmp: [],
+      time: {
+        start: '',
+        end: ''
+      },
+      extraMarginBottom: 0, // dom额外的margin
+      panelId: '',
+      timer: null,
+      dataTotalList: [], // 懒加载：总记录数
+      dataTotalListBak: [], // 用于查询：懒加载，总记录备份
+      isPage: false, // 是否分页懒加载
+      currentRecordNum: 0, // 懒加载：本次取记录的index，第一次从0开始取，每次取3行
+      lineNum: 3, // 每页加载的行数
+      pagePanelId: '', // 当前分页的panelId
+      dragging: null,
+      // chartDataCacheGroup:new Map,//图表数据缓存，用于查询：id:{}
+      stepHeight: 50,
+
+      tempDom: { height: '', width: '' }
+      // showShadow:false,
+    }
+  },
+  methods: {
+    dropmenuChange (id, show) {
+      if (show) {
+        const chart = this.$refs['chart' + id][0]
+        const container = this.$refs.listContainer
+        const heightDifference = container.offsetHeight - chart.offsetTop
+        if (heightDifference < 235) {
+          this.extraMarginBottom = 235 - heightDifference
+          this.$nextTick(() => {
+            container.scrollTop = container.offsetHeight
+          })
+        }
+      } else {
+        this.extraMarginBottom = 0
+      }
+    },
+    tempDomInit () {
+      const span = document.querySelector('.temp-dom')
+      this.tempDom.width = span.offsetWidth
+    },
+    start (event) {
+      event.item.querySelector('.chartTitle').style.background = '#d8dce1'
+      const projectAndAssetFeatureInfos = event.item.querySelectorAll('.feature-content')
+      if (projectAndAssetFeatureInfos && projectAndAssetFeatureInfos.length > 0) {
+        projectAndAssetFeatureInfos.forEach(item => {
+          item.classList.remove('unfold')
+          item.classList.remove('fold')
+        })
+      }
+      this.dataListDragTmp = [...this.dataList]
+    },
+    end (event) {
+      if (event.oldIndex !== event.newIndex) {
+        this.$emit('moveGroupItem', this.dataList)
+        // 处理所有group数据后 调用上层移动 保存
+      }
+    },
+    move (event, orgin) {
+      const dragClass = document.querySelector('.drag-chart-class')// drag-chart-class:yellow chart-ghost:green  fallback-class choose-class:purple
+
+      const chartTitle = dragClass.querySelector('.chartTitle')
+      chartTitle.style.background = '#d8dce1'
+    },
+    clone (event) {
+      const canvas = event.item.querySelector('canvas')
+      const canvasclone = event.clone.querySelector('canvas')
+      canvasclone.style.border = 'solid 1px yellow'
+      if (canvas && canvasclone) {
+        const image = new Image()
+        image.src = canvas.toDataURL()
+        const ctxClone = canvasclone.getContext('2d')
+        // ctxClone.drawImage(image,0,0);
+        image.onload = function () {
+          ctxClone.drawImage(image, 0, 0)
+        }
+      }
+    },
+    dragPosition (e) {
+      const odiv = e// 目标元素e.target
+      // var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
+      // 得到点击时该容器的：
+      /* const startY = e.clientY
+      const startX = e.clientX
+      const _this = this */
+      // 鼠标相对元素的位置
+      const distY = e.clientY - odiv.offsetLeft
+      const distX = e.clientX - odiv.offsetTop
+      document.onmousemove = function (e) {
+        e.preventDefault()
+        const left = e.clientX - distX
+        const top = e.clientY - distY
+        odiv.style.top = top + 'px'
+        odiv.style.left = left + 'px'
+      }
+
+      document.onmouseup = function () {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    },
+    handleDragStart (e, item) {
+      this.dragging = item
+    },
+    handleDragEnd (e, item) {
+      this.dragging = null
+    },
+    // 首先把div变成可以放置的元素，即重写dragenter/dragover
+    handleDragOver (e) {
+      e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
+    },
+    handleDragEnter (e, item) {
+      e.dataTransfer.effectAllowed = 'move'// 为需要移动的元素设置dragstart事件
+      if (item === this.dragging) {
+        return
+      }
+      const newItems = [...this.dataList]
+      const src = newItems.indexOf(this.dragging)
+      const dst = newItems.indexOf(item)
+
+      newItems.splice(dst, 0, ...newItems.splice(src, 1))
+
+      this.dataList = newItems
+    },
+    initCurrentRecordNum () {
+      this.currentRecordNum = 0
+    },
+    cleanData () {
+      this.dataList = []
+      this.chartDataCacheGroup.clear()
+    },
+    initData (filter) {
+      this.cleanData()
+      // 内含 panelId,开始时间,结束时间
+      this.filter = filter
+      this.pagePanelId = this.filter.panelId
+      this.getData(this.filter)
+    },
+    searchCharts (searchName, group) {
+      // this.dataList = [];
+      // this.dataTotalList = [];
+      const chartListTmp = []
+      if (searchName && searchName.trim() !== '') {
+        this.dataTotalListBak.forEach((item) => {
+          if (item.name.indexOf(searchName) > -1 || group.name.indexOf(searchName) > -1) {
+            item.isLoaded = false
+            item.isHide = false
+            chartListTmp.push(item)
+          } else {
+            item.isLoaded = true
+            item.isHide = true
+            chartListTmp.push(item)
+          }
+        })
+      } else {
+        this.dataTotalListBak.forEach((item) => {
+          item.isLoaded = false
+          item.isHide = false
+          chartListTmp.push(item)
+        })
+      }
+
+      this.dataTotalList = [...chartListTmp]
+      this.dataList = [...this.dataTotalList]
+
+      this.$nextTick(() => {
+        if (this.dataList.length > 0) {
+          this.dataList.forEach((item, index) => {
+            this.$refs['editChart' + item.id][0].showLoad(item)// 之后要实现
+            this.setChartSize(item, index)// 设置该图表宽度
+            if (!item.isLoaded) {
+              // 获得当前显示在浏览器的图表，从后台获取数据
+              const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
+              this.handleElementInViewport(chartBox, 0, item, index, true)
+            }
+          })
+        }
+      })
+    },
+    pageDataList (isAdd, panelId, isSearch) {
+      if (panelId !== this.pagePanelId) {
+        this.currentRecordNum = 0
+      }
+      if (this.dataTotalList && this.dataTotalList.length > 0) {
+        if (this.currentRecordNum >= this.dataTotalList.length) {
+          // alert('数据加载完毕！');
+        } else {
+          const dataTmpList = []
+          let spanSum = 0
+          let line = 0// 行数
+          let isDataFull = false
+          const curRecNum = this.currentRecordNum
+          const len = this.dataTotalList.length
+          for (let i = curRecNum; !isDataFull && i < len; i++) {
+            if (line < this.lineNum) {
+              const item = this.dataTotalList[i]
+              const span = item.span
+              const sumTmp = spanSum + span
+              if (sumTmp <= 12) {
+                spanSum = sumTmp
+              } else { // 大于12表示够1行了，
+                line = line + 1
+                spanSum = span
+              }
+              if (line < this.lineNum) {
+                dataTmpList.push(item)
+                this.currentRecordNum = i + 1
+              } else {
+                this.currentRecordNum = i
+                break
+              }
+            } else { // 数据加载够了
+              isDataFull = true
+              this.currentRecordNum = i
+              break
+            }
+          }
+          if (isAdd) {
+            const oldDataListLen = this.dataList.length
+            const dataListTmp = [...this.dataList]
+            this.dataList = [...dataListTmp.concat(dataTmpList)]
+            this.$nextTick(() => {
+              this.dataSetFirst(dataTmpList, oldDataListLen, isSearch)
+            })
+          } else {
+            this.dataList = [...dataTmpList]
+          }
+        }
+      }
+    },
+
+    // 获取panel详情数据,获取panel下所有chart列表
+    getData (params) {
+      this.dataList.forEach((item, index) => {
+        // this.getChartData(item, index, this.filter)
+        this.setChartSize(item, index)
+        const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
+        this.handleElementInViewport(chartBox, 0, item, index, true)
+      })
+    },
+    loadChartData (scrollTop) {
+      if (this.dataList.length > 0) {
+        this.dataList.forEach((item, index) => {
+          this.setChartSize(item, index)
+          if (!item.isLoaded) {
+            // 获得当前显示在浏览器的图表，从后台获取数据
+            const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
+            this.handleElementInViewport(chartBox, scrollTop, item, index)
+          }
+          if (item.type === 'diagram') {
+            this.$refs['editChart' + item.id][0].resize()
+          }
+        })
+      }
+    },
+    // arr: 该panel下图表list,生成该看板下所有图表
+    dataSetFirst (arr, oldDataListLen, isSearch) {
+      if (arr.length) {
+        arr.forEach((item, index) => {
+          let realIndex = index
+          if (oldDataListLen) {
+            realIndex += oldDataListLen
+          }
+          const chartType = item.type
+          if (chartType !== 'url') {
+            if (isSearch) {
+              this.getChartDataForSearch(item, realIndex)
+            } else {
+              this.getChartData(item, realIndex)
+            }
+          } else {
+            if (!isSearch && this.$refs['editChart' + item.id] && this.$refs['editChart' + item.id][0]) {
+              this.$refs['editChart' + item.id][0].showLoad(item)
+            }
+            this.setChartSize(item, realIndex) // 设置该图表宽度
+          }
+        })
+      }
+    },
+    getChartDataForSearch (chartItem, realIndex) {
+      let chartData = this.chartDataCacheGroup.get(chartItem.id)
+      if (chartData) {
+        const filterType = chartData.filterType
+        const errorMsg = chartData.errorMsg
+        const tableData = chartData.tableData
+        const panelId = chartData.panelId
+        const filter = chartData.filter
+        const legend = chartData.legend
+        const series = chartData.series
+        const singleStatRlt = chartData.singleStatRlt
+        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+          if (chartItem.type === 'table') { // 表格
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                panelId, filter, filterType, errorMsg)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                panelId, filter, '', errorMsg)
+            }
+          } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                panelId, filter, legend, filterType, errorMsg)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                panelId, filter, legend, '', errorMsg)
+            }
+          } else if (chartItem.type === 'singleStat') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                this.filter.panelId, this.filter, filterType, errorMsg)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                this.filter.panelId, this.filter, '', errorMsg)
+            }
+          } else if (chartItem.type == 'text') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, filterType)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, '')
+            }
+          } else if (chartItem.type == 'logs') {
+            if (filterType === 'showFullScreen') { // 全屏查询
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, filterType)
+            } else {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                panelId, filter, null, '')
+            }
+          }
+        }
+      } else {
+        this.getChartData(chartItem, realIndex)
+      }
+      chartData = null
+    },
+    // 获取一个图表具体数据,图表信息，图表位置index
+    getChartData (chartInfo, pos, filterType) {
+      const chartItem = chartInfo
+      if (chartItem.type === 'assetInfo') {
+        if (chartItem.from != this.$CONSTANTS.fromRoute.endpoint) {
+          this.$set(chartItem, 'draggable', true)
+          this.$set(chartItem, 'resizable', true)
+        }
+        this.getAssetInfoChartData(chartItem)
+        return
+      }
+      if (chartItem.type === 'endpointInfo') {
+        this.getEndpointInfoChartData(chartItem)
+        return
+      }
+      if (chartItem.type == 'projectInfo') {
+        chartItem.name = this.$t('project.chart.projectInfo')
+        this.getProjectInfoChartData(chartItem)
+        return
+      }
+      if (chartItem.type === 'alertList') {
+        this.getAlertListChartData(chartItem, filterType)
+        return
+      }
+      if (chartItem.type === 'alertRuleInfo') {
+        this.getAlertRuleChartData(chartItem)
+        return
+      }
+
+      if (chartItem.type == 'text') {
+        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, filterType)
+          } else {
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, '')
+          }
+        }
+        return
+      }
+      if (chartItem.type == 'logs') {
+        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, filterType)
+          } else {
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, '')
+          }
+        }
+        return
+      }
+
+      if (this.isModel) {
+        this.modelStaticData(chartInfo, filterType)
+      } else {
+        // 没有数据的设置提示信息暂无数据-针对每一个图
+        const len = chartItem.elements ? chartItem.elements.length : 0
+        if (len === 0) {
+          this.$nextTick(() => {
+            if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+              this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter)// ????怎么设置的无数据？？
+            }
+          })
+        } else {
+          let startTime = ''
+          let endTime = ''
+          if (filterType === 'refresh') { // 刷新
+            const now = new Date(bus.computeTimezone(new Date().getTime()))
+            const origin = new Date(this.filter.end_time)
+            const numInterval = now.getTime() - origin.getTime()
+            if (numInterval >= 60000) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
+              startTime = this.getNewTime(this.filter.start_time, numInterval)
+              endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
+            } else {
+              startTime = this.filter.start_time
+              endTime = this.filter.end_time
+            }
+          } else if (filterType === 'showFullScreen') { // 全屏时间查询
+            startTime = this.filter.start_time
+            endTime = this.filter.end_time
+            // this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
+          } else {
+            startTime = this.filter.start_time
+            endTime = this.filter.end_time
+          }
+
+          const step = bus.getStep(startTime, endTime)
+          this.$nextTick(() => {
+            const axiosArr = chartItem.elements.map((ele) => {
+              const filterItem = ele
+              let query = filterItem.expression
+              if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给null
+                chartInfo.param.nullType = chartInfo.param.nullType || 'null'
+                query += '&nullType=' + chartInfo.param.nullType
+              }
+              // if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
+              //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+              // }
+
+              if (this.from === fromRoute.chartTemp) {
+                return new Promise(resolve => resolve(chartTempData))
+              }
+              if (chartInfo.type == 'logs') {
+                return chartTempData
+              }
+              return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
+            })
+            // 一个图表的所有element单独获取数据
+            axios.all(axiosArr).then((res) => {
+              if (res.length > 0) {
+                const series = []
+                let singleStatRlt = ''
+                const legend = []
+                const tableData = []
+                /* let sumData = {
+                    name: 'sum',
+                    data: [],
+                    visible: true,
+                    threshold: null,
+                  }; */
+                let errorMsg = ''
+                let pieSeries
+                if (chartInfo.type === 'pie') {
+                  pieSeries = {
+                    type: 'pie',
+                    radius: '100%',
+                    center: ['50%', '50%'],
+                    top: '20%',
+                    bottom: '20%',
+                    // roseType: 'radius',
+                    minAngle: 10,
+                    itemStyle: {
+                      borderRadius: 5,
+                      borderColor: '#fff',
+                      borderWidth: 1
+                    },
+                    label: {
+                      show: false
+                    },
+                    emphasis: {
+                      label: {
+                        show: false
+                      }
+                    },
+                    data: []
+                  }
+                }
+                if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
+                  pieSeries = {
+                    type: 'bar',
+                    // roseType: 'radius',
+                    itemStyle: {
+                      borderRadius: 5,
+                      borderColor: '#fff',
+                      borderWidth: 1
+                    },
+                    label: {
+                      show: false
+                    },
+                    emphasis: {
+                      label: {
+                        show: false
+                      }
+                    },
+                    data: []
+                  }
+                }
+                res.forEach((response, innerPos) => {
+                  if (response.status === 'success') {
+                    errorMsg = ''
+                    if (response.data.result) {
+                      // 循环处理每个elements下获取的数据列
+                      if (chartItem.type === 'singleStat') {
+                        if (response.data.result.length === 1) {
+                          const statistics = chartItem.param.statistics || 'null'
+                          if (response.data.result[0].values) {
+                            singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values)
+                          }
+                        } else if (response.data.result.length > 1) {
+                          singleStatRlt = this.$t('dashboard.panel.singleStatErrorTip')
+                        }
+                      } else {
+                        response.data.result.forEach((queryItem, resIndex) => {
+                          let seriesItem = {
+                            theData: {
+                              name: '',
+                              symbol: 'emptyCircle', // 去掉点
+                              symbolSize: [2, 2],
+                              smooth: 0.2, // 曲线变平滑
+                              showSymbol: false,
+                              data: [],
+                              lineStyle: {
+                                width: 1,
+                                opacity: 0.9
+                              },
+                              animation: false,
+                              type: chartInfo.type
+                            },
+                            metric_name: ''
+                          }
+
+                          if (chartInfo.type === 'stackArea') {
+                            seriesItem.theData.type = 'line'
+                            seriesItem.theData.stack = chartInfo.name
+                            seriesItem.theData.areaStyle = { opacity: 0.3 }
+                          }
+                          if ((chartInfo.type === 'line' || chartInfo.type === 'stackArea' || chartInfo.type === 'bar') && chartInfo.param && chartInfo.param.threshold) {
+                            seriesItem.theData.markLine = {
+                              silent: true,
+                              symbol: ['circle', 'circle'],
+                              label: {
+                                distance: this.computeDistance(chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(chartInfo.param.threshold)),
+                                formatter (params) {
+                                  return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value)
+                                }
+                              },
+                              lineStyle: {
+                                color: '#d64f40',
+                                width: 2,
+                                type: 'dotted'
+                              },
+                              data: [{
+                                yAxis: Number(chartInfo.param.threshold)
+                              }]
+                            }
+                          }
+                          // 图表中每条线的名字,后半部分
+                          let host = ''// up,
+                          if (queryItem.metric.__name__) {
+                            host = `${queryItem.metric.__name__}{`// up,
+                          }
+                          const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+                          // 设置时间-数据格式对
+                          let tempArr = []
+                          let dpsArr = []
+                          tempArr = queryItem.values
+                          dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                          dpsArr = dpsArr.map(item => {
+                            return [item[0], [item[1][0], Number(item[1][1])]]
+                          })
+                          // 判断是否有数据, && tagsArr.length > 0
+                          if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                            tagsArr.forEach((tag, i) => {
+                              if (tag !== '__name__') {
+                                host += `${tag}="${queryItem.metric[tag]}",`
+                              }
+                            })
+                            if (host.endsWith(',')) {
+                              host = host.substr(0, host.length - 1)
+                            }
+                            if (queryItem.metric.__name__) {
+                              host += '}'
+                            }
+                            if (!host || host === '') {
+                              host = chartItem.elements[innerPos].expression
+                            }
+                            // 处理legend别名
+                            let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend)
+                            if (!alias || alias === '') {
+                              alias = host
+                            }
+                            legend.push({ name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex, alias: alias })
+                            // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+
+                            seriesItem.theData.name = host + '-' + chartItem.elements[innerPos].id + '-' + resIndex
+                            // alert(seriesItem.theData.name);
+                            seriesItem.metric_name = seriesItem.theData.name
+                            // 将秒改为毫秒
+                            // alert('table=='+JSON.stringify(queryItem))
+                            seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+                              /* 曲线汇总暂不需要
+                                if (sumData.data[dpsIndex]) {
+                                  const sumNum = sumData.data[dpsIndex][1] || 0;
+                                  sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
+                                } else {
+                                  sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
+                                }
+                                */
+                              // let t_date = new Date(dpsItem[0] * 1000);
+                              // let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
+                              tableData.push({ // 表格数据
+                                // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+                                // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+                                element: { element: host, alias: alias },
+                                // time: timeTmp,//采集时间
+                                // value: dpsItem[1],//数值
+                                data: [dpsItem[0] * 1000, dpsItem[1]]
+                              })
+                              return [dpsItem[0] * 1000, dpsItem[1]]
+                            })
+                            if (chartInfo.type === 'pie') {
+                              pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
+                            } else if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
+                              pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
+                            } else {
+                              series.push(seriesItem.theData)
+                              seriesItem = null
+                            }
+                          } else if (chartItem.elements && chartItem.elements[innerPos]) {
+                            // 无数据提示
+                            /*
+                              const currentInfo = chartItem.elements[innerPos];
+                              const errorMsg = `图表 ${chartItem.name} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
+                              this.$message.warning({
+                                duration: 15,
+                                content: errorMsg,
+                                closable: true,
+                              });
+                              */
+                          }
+                        })
+                      }
+                    }
+                  } else {
+                    if (response.msg) {
+                      // this.$message.error(response.msg);
+                      errorMsg = response.msg
+                    } else if (response.error) {
+                      // this.$message.error(response.error);
+                      errorMsg = response.error
+                    } else {
+                      // this.$message.error(response);
+                      errorMsg = response
+                    }
+                  }
+                })
+                if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                  if (chartInfo.type === 'pie') {
+                    series.push(pieSeries)
+                  }
+                  if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
+                    series.push(pieSeries)
+                  }
+                  const chartData = {
+                    chartItem: chartItem,
+                    series: series,
+                    singleStatRlt: singleStatRlt,
+                    legend: legend,
+                    tableData: tableData,
+                    panelId: this.filter.panelId,
+                    filter: this.filter,
+                    filterType: filterType,
+                    errorMsg: errorMsg
+                  }
+                  this.chartDataCacheGroup.set(chartInfo.id, chartData)
+                  if (chartItem.type === 'table') { // 表格
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                        this.filter.panelId, this.filter, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                        this.filter.panelId, this.filter, '', errorMsg)
+                    }
+                  } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type == 'pie') {
+                    if (series.length && chartItem.type === 4) { // 曲线汇总
+                      // series.push(sumData);//后续需要
+                    }
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                        this.filter.panelId, this.filter, legend, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                        this.filter.panelId, this.filter, legend, '', errorMsg)
+                    }
+                  } else if (chartItem.type === 'singleStat') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, '', errorMsg)
+                    }
+                  } else if (chartItem.type === 'logs') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, filterType, errorMsg)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                        this.filter.panelId, this.filter, '', errorMsg)
+                    }
+                  }
+                }
+              } else {
+                const type = chartItem.type
+                if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                  if (type === 'table') {
+                    if (filterType === 'showFullScreen') { // table的全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter)
+                    }
+                  } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
+                    if (filterType === 'showFullScreen') { // table的全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                        this.filter)
+                    }
+                  } else if (chartItem.type === 'singleStat') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter)
+                    }
+                  } else if (chartItem.type === 'logs') {
+                    if (filterType === 'showFullScreen') { // 全屏查询
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter, filterType)
+                    } else {
+                      this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                        this.filter.panelId, this.filter)
+                    }
+                  }
+                }
+              }
+            }).catch((error) => {
+              if (error) {
+                this.$message.error(error.toString())
+                console.error(error)
+              }
+            })
+          })
+        }
+      }
+    },
+    computeDistance (str) {
+      const span = document.querySelector('.temp-dom')
+      if (span) {
+        span.textContent = str
+        const txtWidth = parseFloat(window.getComputedStyle(span).width)
+        return Number('-' + (txtWidth + 5))
+      }
+    },
+    modelStaticData (chartInfo, filterType) {
+      const series = []
+      const legend = []
+      const tableData = []
+      const singleStatRlt = 999
+      if (chartInfo.type === 'singleStat') {
+        // const statistics = chartInfo.param.statistics
+      } else {
+        const seriesItem = {
+          theData: {
+            name: '',
+            symbol: 'emptyCircle', // 去掉点
+            symbolSize: [2, 2],
+            smooth: 0.2, // 曲线变平滑
+            showSymbol: false,
+            data: [],
+            lineStyle: {
+              width: 1,
+              opacity: 0.9
+            },
+            type: chartInfo.type
+          },
+          // visible: true,
+          // threshold: null,
+          metric_name: ''
+        }
+        if (chartInfo.type === 'stackArea') {
+          seriesItem.theData.type = 'line'
+          seriesItem.theData.stack = chartInfo.name
+          seriesItem.theData.areaStyle = { opacity: 0.3 }
+        }
+        // 图表中每条线的名字,后半部分
+        let host = 'host'// up,
+        const queryItem = { metric: { item1: 'item1', item2: 'item2', item3: 'item3' }, values: [] }
+        const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+        // 设置时间-数据格式对
+        const tempArr = []
+        const dpsArr = []
+        const timeStamp = Math.floor(new Date().getTime() / 1000)
+        for (let i = 0; i < 20; i++) {
+          tempArr.push([timeStamp - (20 - i) * 15, Math.floor(Math.random() * 10) + ''])
+          queryItem.values.push(tempArr[i])
+          dpsArr.push([i + '', tempArr[i]])
+        }
+        // 判断是否有数据, && tagsArr.length > 0
+        if (dpsArr.length > 0 && this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
+          tagsArr.forEach((tag, i) => {
+            if (tag !== '__name__') {
+              host += `${tag}="${queryItem.metric[tag]}",`
+            }
+          })
+          if (queryItem.metric.__name__) {
+            host += '}'
+          }
+          // 处理legend别名
+          let alias = this.$refs['editChart' + chartInfo.id][0].dealLegendAlias(host, chartInfo.elements[0].legend)
+          if (!alias || alias === '') {
+            alias = host
+          }
+          legend.push({ name: host, alias: alias })
+          // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+          seriesItem.theData.name = host
+          // alert(seriesItem.theData.name);
+          seriesItem.metric_name = seriesItem.theData.name
+          // 将秒改为毫秒
+          // alert('table=='+JSON.stringify(queryItem))
+          seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+            const tData = new Date(dpsItem[0] * 1000)
+            const timeTmp = bus.timeFormate(tData, 'yyyy-MM-dd hh:mm:ss')
+            tableData.push({ // 表格数据
+              // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+              // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+              element: { element: host, alias: alias },
+              time: timeTmp, // 采集时间
+              value: dpsItem[1]// 数值
+            })
+            return [dpsItem[0] * 1000, dpsItem[1]]
+          })
+          series.push(seriesItem.theData)
+        }
+      }
+      if (this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
+        const errorMsg = ''
+        const chartData = {
+          chartItem: chartInfo,
+          series: series,
+          singleStatRlt: singleStatRlt,
+          legend: legend,
+          tableData: tableData,
+          panelId: this.filter.panelId,
+          filter: this.filter,
+          filterType: filterType,
+          errorMsg: errorMsg
+        }
+        this.chartDataCacheGroup.set(chartInfo.id, chartData)
+        if (chartInfo.type === 'table') { // 表格
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
+              this.filter.panelId, this.filter, filterType, '')
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
+              this.filter.panelId, this.filter, '', '')
+          }
+        } else if (chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 4) {
+          if (series.length && chartInfo.type === 4) { // 曲线汇总
+            // series.push(sumData);//后续需要
+          }
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
+              this.filter.panelId, this.filter, legend, filterType, errorMsg)
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
+              this.filter.panelId, this.filter, legend, '', errorMsg)
+          }
+        } else if (chartInfo.type === 'singleStat') {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, filterType, errorMsg)
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, '', errorMsg)
+          }
+        } else if (chartInfo.type === 'logs') {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, filterType, errorMsg)
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, '', errorMsg)
+          }
+        }
+      }
+    },
+    getEndpointInfoChartData (chartInfo) {
+      const detail = []
+      this.$refs['editChart' + chartInfo.id][0].showLoad()
+      chartInfo.name = this.$t('project.chart.endpointInfo')
+
+      const basicInfo = JSON.parse(JSON.stringify(this.detail))
+      const basicInfoReq = new Promise((resolve, reject) => {
+        const now = new Date()
+        const startTime = bus.timeFormate(new Date(now).setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
+        // const step = bus.getStep(startTime, endTime)
+        this.$nextTick(() => {
+          let query = chartInfo.elements[0].expression
+          if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea') && chartInfo.param) {
+            chartInfo.param.nullType = chartInfo.param.nullType || 'null'
+            query += '&nullType=' + chartInfo.param.nullType
+          }
+          this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=5m').then(response => {
+            if (response.status === 'success') {
+              if (response.data.result) {
+                const series = {
+                  name: '',
+                  symbol: 'emptyCircle', // 去掉点
+                  symbolSize: 4,
+                  smooth: 0.2, // 曲线变平滑
+                  showSymbol: false,
+                  data: [],
+                  type: 'line',
+                  lineStyle: {
+                    width: 1,
+                    opacity: 0.9
+                  },
+                  itemStyle: {
+                    color (params) {
+                      if (params.data[1] == '1') {
+                        return '#50d050'
+                      } else {
+                        return '#d64f40'
+                      }
+                    }
+                  }
+                }
+                response.data.result.forEach((queryItem, resInnerPos) => {
+                  // 将秒改为毫秒
+                  series.data = queryItem.values.map((dpsItem, dpsIndex) => {
+                    return [dpsItem[0] * 1000, dpsItem[1]]
+                  })
+                })
+                basicInfo.stateSeries = [series]
+                basicInfo.state = ''
+                resolve({ title: this.$t('project.chart.basicTitle'), data: basicInfo, type: 'endpointInfo' })
+              }
+            }
+          })
+        })
+      })
+
+      const endpointId = this.additionalInfo.id
+      const alertMsg = new Promise((resolve, reject) => {
+        this.$get('/alert/message?endpointId=' + endpointId + '&state=1&pageSize=-1').then(response => {
+          if (response.code == 200) {
+            const alerts = {}
+            if (response.data) {
+              response.data.list.forEach(t => {
+                const alertRule = t.alertRule.alertName
+                if (alerts[alertRule]) {
+                  alerts[alertRule]++
+                } else {
+                  alerts[alertRule] = 1
+                }
+              })
+            }
+            resolve({ title: this.$t('overall.alert'), data: alerts })
+          }
+        })
+      })
+      Promise.all([basicInfoReq, alertMsg]).then(resolves => {
+        resolves.forEach(t => detail.push(t))
+        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail)
+      })
+    },
+    getAssetInfoChartData (chartInfo) {
+      const vm = this
+      chartInfo.name = this.$t('asset.assetInfo')
+      const detail = []
+      if (!this.isModel) {
+        this.$refs['editChart' + chartInfo.id][0].showLoad()
+        const assetId = this.additionalInfo.assetId ? this.additionalInfo.assetId : this.additionalInfo.id
+        this.$get('/asset/info?id=' + assetId).then(response => {
+          if (response.code == 200) {
+            response.data && (function () {
+              response.data.Basic && detail.push({
+                title: vm.$t('project.chart.basicTitle'),
+                type: 'basic',
+                data: response.data.Basic
+              })
+              response.data.Attribute && detail.push({
+                title: vm.$t('asset.featureTitle'),
+                type: 'attribute',
+                data: response.data.Attribute
+              })
+            }())
+          }
+          this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
+        })
+      } else {
+        detail.push({
+          title: vm.$t('project.chart.basicTitle'),
+          type: 'basic',
+          data: {
+            sn: 'assetInfo Test',
+            host: '192.168.40.42',
+            pingStatus: 1,
+            pingRtt: 80,
+            cpuNum: '8',
+            memery: '12GB',
+            memery$_$free: '3GB'
+          }
+        })
+        detail.push({
+          title: vm.$t('asset.featureTitle'),
+          type: 'feature',
+          data: {
+            CPU: 'Intel E500',
+            Memory: '256GB',
+            NetworkInterface: ['eth0', 'eth1'],
+            Disk: [{
+              mount: '/',
+              total: '256GB',
+              free: '128GB',
+              usageRate: '50%'
+            }]
+          }
+        })
+        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
+      }
+    },
+    getProjectInfoChartData (chartInfo) {
+      const vm = this
+      const detail = []
+      if (!this.isModel) {
+        this.$refs['editChart' + chartInfo.id][0].showLoad(chartInfo)
+        this.$get('/project/info?id=' + this.additionalInfo.id).then(response => {
+          if (response.code == 200) {
+            response.data && (function () {
+              response.data.basic && detail.push({
+                title: vm.$t('project.chart.basicTitle'),
+                data: response.data.basic,
+                type: 'project'
+              })
+              response.data.module && (function () {
+                response.data.module.forEach(d => {
+                  detail.push({
+                    title: `${vm.$t('project.module.module')}：${d.name}`,
+                    data: d,
+                    type: 'module'
+                  })
+                })
+              }())
+            }())
+          }
+          this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter, response.msg)
+        })
+      } else {
+        detail.push({
+          title: 'system',
+          data: {
+            id: 1,
+            name: 'system',
+            remark: '描述信息',
+            alertStat: [1, 2, 3]
+          }
+        })
+        detail.push({
+          title: `${this.$t('project.module.module')}：kafka`,
+          data: {
+            id: 1,
+            name: 'kafka',
+            type: 'http',
+            remark: '描述信息',
+            endpointStat: [3, 23],
+            alertStat: [2, 3, 4]
+          }
+        })
+        detail.push({
+          title: `${this.$t('project.module.module')}：kafkakafkakafkakafkakafkakafkakafka`,
+          data: {
+            id: 2,
+            name: 'kafkakafkakafkakafkakafkakafkakafka',
+            type: 'http',
+            remark: '描述信息',
+            endpointStat: [3, 23],
+            alertStat: [2, 0, 4]
+          }
+        })
+        detail.push({
+          title: `${this.$t('project.module.module')}：kafkakafka`,
+          data: {
+            id: 3,
+            name: 'kafkakafka',
+            type: 'snmp',
+            remark: '描述信息',
+            endpointStat: [3, 0],
+            alertStat: [2, 3, 4]
+          }
+        })
+        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter)
+      }
+    },
+    getAlertListChartData (chartInfo, filterType) {
+      if (this.additionalInfo) {
+        this.$set(chartInfo, 'param', { endpointId: this.additionalInfo.id })
+      }
+      this.$refs['editChart' + chartInfo.id][0].getAlertList(filterType)
+    },
+    getAlertRuleChartData (chartInfo) {
+      const vm = this
+      const detail = []
+      const req = new Promise((resolve, reject) => {
+        this.$get('alert/rule/stat?id=' + this.additionalInfo.id).then(response => {
+          if (response.code == 200) {
+            response.data && (function () {
+              if (response.data.project && response.data.project.length > 0) {
+                detail.push({ title: vm.$t('overall.entity'), data: convert(response.data.project) })
+              }
+              /* if (response.data.module && response.data.module.length > 0) {
+                  detail.push({title: vm.$t("project.module.module"), data: convert(response.data.module)});
+                }
+                if (response.data.endpoint && response.data.endpoint.length > 0) {
+                  detail.push({title: vm.$t("project.endpoint.endpoint"), data: convert(response.data.endpoint)});
+                } */
+              if (response.data.asset && response.data.asset.length > 0) {
+                detail.push({ title: vm.$t('asset.asset'), data: convert(response.data.asset) })
+              }
+            }())
+            resolve(true)
+          }
+        })
+      })
+      req.then(result => {
+        this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail)
+      })
+
+      function convert (d) {
+        const data = {}
+        d.forEach(item => {
+          data[item.name] = item.nums
+          !data._module_ && (data._module_ = {})
+          if (item.module && item.module instanceof Array && item.module.length > 0) {
+            data._module_[item.name] = {}
+            item.module.forEach(m => {
+              data._module_[item.name][m.name] = m.nums
+              !data._module_[item.name]._endpoint_ && (data._module_[item.name]._endpoint_ = {})
+              if (m.endpoint && m.endpoint instanceof Array && m.endpoint.length > 0) {
+                data._module_[item.name]._endpoint_[m.name] = {}
+                m.endpoint.forEach(e => {
+                  data._module_[item.name]._endpoint_[m.name][e.name] = e.nums
+                })
+              }
+            })
+          }
+        })
+        return data
+      }
+    },
+
+    // 设置图表的尺寸
+    setChartSize (item, index) {
+      this.$nextTick(() => {
+        const chartBox = document.getElementById('chart-' + item.id)
+        if (chartBox) {
+          chartBox.style.width = `${(item.span / 12) * 100}%`
+          chartBox.style.height = `${document.getElementById('listContainer' + item.groupId).offsetWidth / 12 * item.height}px`
+        }
+      })
+    },
+    getNewTime (time, num) {
+      const date = new Date(time)
+      const newDate = new Date(parseInt(date.getTime(), 10) + num)
+      return bus.timeFormate(newDate, 'yyyy-MM-dd hh:mm:ss')
+    },
+    // 删除图表
+    removeChart (chartId) { // from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
+      const chart = this.dataList.find(item => item.id === chartId)
+      if (chart) {
+        this.$emit('on-remove-group-chart', chart)
+      }
+    },
+    // 复制图表
+    duplicateChart (chartId) {
+      const chart = this.dataList.find(item => item.id === chartId)
+      if (chart) {
+        this.$emit('on-duplicate-group-chart', chart)
+      }
+    },
+    // 编辑图表
+    editData (chartId) {
+      // 获取该id下chart的相关信息
+      const chart = this.dataList.find(item => item.id === chartId)
+      if (chart) {
+        this.$emit('on-edit-group-chart', chart)
+      }
+    },
+
+    editChartForDrag (chartItem) {
+      const chart = this.dataList.find(item => item.id === chartItem.id)
+      chart.span = chartItem.span
+      chart.height = chartItem.height
+    },
+    // 刷新列表中的一个图表
+    refreshChart (chartId, searchTime) {
+      this.dataList.forEach((item, index) => {
+        if (item.id === chartId) {
+          this.getChartData(item, index, 'refresh')
+        }
+      })
+    },
+    refresh () {
+      this.dataList.forEach((item, index) => {
+        this.getChartData(item, index, this.filter)
+      })
+    },
+    resize () {
+      this.dataList.forEach((item, index) => {
+        if (item.isHide) {
+          return
+        }
+        if (this.$refs['editChart' + item.id][0].chartResize) {
+          this.$refs['editChart' + item.id][0].chartResize()
+        } else if (this.$refs['editChart' + item.id][0].resize) {
+          this.$refs['editChart' + item.id][0].resize()
+        }
+      })
+    },
+    searchData (chartId, searchTime) {
+      if (searchTime) { // 全屏时间查询
+        this.filter.start_time = bus.timeFormate(searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+        this.filter.end_time = bus.timeFormate(searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+      }
+      this.dataList.forEach((item, index) => {
+        if (item.id === chartId) {
+          this.getChartData(item, index, 'showFullScreen')
+        }
+      })
+    },
+    // 懒加载，判断网页区域，加载可见区的prom数据
+    handleElementInViewport (ele, scrollTop, item, index, isSearch) {
+      /*
+        网页被卷去的高：document.body.scrollTop
+        网页正文全文高：document.body.scrollHeight
+        网页可见区域高（包括边线的高）：document.body.offsetHeight；
+        网页可见区域高：document.body.clientHeight
+        */
+      const that = this
+      setTimeout(function () {
+        const itemHeight = item.height
+        // 1.元素距离页面顶部的距离 + group的高度
+        const groupHeight = item.groupId ? document.getElementById('chart-' + item.groupId).offsetTop : 0
+        const mainOffsetTop = ele.offsetTop + groupHeight// offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
+        // 2.元素的高度
+        const mainHeight = itemHeight// ele.offsetHeight;//itemHeight;
+        // 3.页面滚动的距离
+        const windowScrollTop = scrollTop// document.documentElement.scrollTop || document.body.scrollTop;
+        // 4.浏览器可见区域的高度
+        const windowHeight = (window.innerHeight || document.documentElement.clientHeight) - 50 - 42
+
+        /*
+          * 在窗口上下滚动的情况下, 一个页面元素的状态有下面3种：
+          1.向上滚动超出可见区域
+          2.向下滚动超出可视区域
+          3.在可视区域内
+          * 第一种情况   由于元素随页面向上滚动, 整个页面滚动的距离  大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出
+          * 第二种情况   由于元素随页面向下滚动, 整个页面滚动的距离  小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出
+          * */
+        /* console.log("___isInView____","元素距离页面顶部的距离mainOffsetTop="+mainOffsetTop)//不变
+          console.log("___isInView____","元素高度mainHeight="+mainHeight)//不变
+          console.log("___isInView____","scrollTop页面滚动的距离windowScrollTop="+windowScrollTop)//变
+          console.log("___isInView____","浏览器可见区域高度windowHeight="+windowHeight)//不变
+          console.log(item.name,(mainOffsetTop+mainHeight/3),"<",(windowScrollTop+windowHeight),((mainOffsetTop+mainHeight/3) < (windowScrollTop+windowHeight))) */
+        if ((mainOffsetTop + mainHeight / 3) < (windowScrollTop + windowHeight)) {
+          const chartType = item.type
+          item.isLoaded = true
+          if (chartType !== 'url') {
+            that.getChartDataForSearch(item, index)
+          } else {
+            that.$refs['editChart' + item.id][0].showLoad(item)
+          }
+        }
+      }, 500)
+    },
+    chartBySync (item) {
+      this.$post('visual/panel/chart/syncTmpl', { ids: [item.id] }).then(res => {
+        if (res.code === 200) {
+          this.getData(this.filter)
+          this.$message.success(this.$t('tip.syncSuccess'))
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    }
+  },
+  created () {
+    this.chartDataCacheGroup = new Map()
+  },
+  mounted () {
+    this.tempDomInit()
+  }
+
+}
+</script>
diff --git a/nezha-fronted/src/components/chart/chart.vue b/nezha-fronted/src/components/chart/chart.vue
new file mode 100644
index 000000000..efc98c891
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartAssetInfo.vue b/nezha-fronted/src/components/chart/chart/chartAssetInfo.vue
new file mode 100644
index 000000000..612d2de04
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartAssetInfo.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-asset-info'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue
new file mode 100644
index 000000000..738f07c59
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartBar.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-bar'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartClock.vue b/nezha-fronted/src/components/chart/chart/chartClock.vue
new file mode 100644
index 000000000..5c8ab9eb9
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartClock.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-clock'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartDiagram.vue b/nezha-fronted/src/components/chart/chart/chartDiagram.vue
new file mode 100644
index 000000000..3a093e07d
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartDiagram.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-diagram'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartEndpointInfo.vue b/nezha-fronted/src/components/chart/chart/chartEndpointInfo.vue
new file mode 100644
index 000000000..07052c31e
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartEndpointInfo.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-endpoint-info'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue
new file mode 100644
index 000000000..259bf9dac
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-gauge' // 仪表盘
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartGroup.vue b/nezha-fronted/src/components/chart/chart/chartGroup.vue
new file mode 100644
index 000000000..3abedc1a3
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartGroup.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-group'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartLog.vue b/nezha-fronted/src/components/chart/chart/chartLog.vue
new file mode 100644
index 000000000..b06d22641
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartLog.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-log' // 日志列表，纯日志，不再包含图形
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartPie.vue b/nezha-fronted/src/components/chart/chart/chartPie.vue
new file mode 100644
index 000000000..d57fa9761
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartPie.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-pie'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue
new file mode 100644
index 000000000..28e6932b2
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartStat.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-stat'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue
new file mode 100644
index 000000000..e49062193
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartTable.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-table'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartText.vue b/nezha-fronted/src/components/chart/chart/chartText.vue
new file mode 100644
index 000000000..6ec3d43d0
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartText.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-text'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
new file mode 100644
index 000000000..9c6345989
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-time-series' // x轴是时间的图，包括折线、柱状、堆叠、散点
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartTreemap.vue b/nezha-fronted/src/components/chart/chart/chartTreemap.vue
new file mode 100644
index 000000000..7ae1825b4
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartTreemap.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-treemap' // 矩形树
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartUrl.vue b/nezha-fronted/src/components/chart/chart/chartUrl.vue
new file mode 100644
index 000000000..89fdb814c
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartUrl.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-url'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/chartValue.vue b/nezha-fronted/src/components/chart/chart/chartValue.vue
new file mode 100644
index 000000000..855b10db1
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/chartValue.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-value' // 单值图
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/chart/chart/options/chartBar.js b/nezha-fronted/src/components/chart/chart/options/chartBar.js
new file mode 100644
index 000000000..bc279ce64
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/options/chartBar.js
@@ -0,0 +1,4 @@
+const chartBarOption = {
+
+}
+export default chartBarOption
diff --git a/nezha-fronted/src/components/chart/chart/options/chartGauge.js b/nezha-fronted/src/components/chart/chart/options/chartGauge.js
new file mode 100644
index 000000000..5b61384ae
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/options/chartGauge.js
@@ -0,0 +1,4 @@
+const chartGaugeOption = {
+
+}
+export default chartGaugeOption
diff --git a/nezha-fronted/src/components/chart/chart/options/chartPie.js b/nezha-fronted/src/components/chart/chart/options/chartPie.js
new file mode 100644
index 000000000..3faec2045
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/options/chartPie.js
@@ -0,0 +1,4 @@
+const chartPieOption = {
+
+}
+export default chartPieOption
diff --git a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
new file mode 100644
index 000000000..ea8d3025a
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
@@ -0,0 +1,9 @@
+export const chartTimeSeriesLineOption = {
+
+}
+export const chartTimeSeriesBarOption = {
+
+}
+export const chartTimeSeriesScatterOption = {
+
+}
diff --git a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js
new file mode 100644
index 000000000..265b61b47
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js
@@ -0,0 +1,4 @@
+const chartTreemapOption = {
+
+}
+export default chartTreemapOption
diff --git a/nezha-fronted/src/components/chart/chart/options/index.js b/nezha-fronted/src/components/chart/chart/options/index.js
new file mode 100644
index 000000000..52473da2d
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chart/options/index.js
@@ -0,0 +1,7 @@
+import chartBarOption from './chartBar'
+import chartGaugeOption from './chartGauge'
+import chartPieOption from './chartPie'
+import { chartTimeSeriesLineOption, chartTimeSeriesBarOption, chartTimeSeriesScatterOption } from './chartTimeSeries'
+import chartTreemapOption from './chartTreemap'
+
+export default { chartBarOption, chartGaugeOption, chartPieOption, chartTimeSeriesLineOption, chartTimeSeriesBarOption, chartTimeSeriesScatterOption, chartTreemapOption }
diff --git a/nezha-fronted/src/components/chart/chartHeader.vue b/nezha-fronted/src/components/chart/chartHeader.vue
new file mode 100644
index 000000000..a412663c5
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chartHeader.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="chart-header">
+    <div class="chart-header__title">{{chartInfo.name}}</div>
+    <div class="chart-header__tools">
+      <span v-if="chartInfo.remark" class="chart-header__tool">
+        <el-tooltip :content="chartInfo.remark" effect="light" placement="top">
+           <i class="nz-icon nz-icon-info-normal tool__icon"></i>
+        </el-tooltip>
+      </span>
+      <span class="chart-header__tool" @click="refreshChart">
+        <el-tooltip :content="$t('dashboard.refresh')" effect="light" placement="top">
+           <i class="nz-icon nz-icon-replay tool__icon"></i>
+        </el-tooltip>
+      </span>
+      <span v-if="from !== this.$CONSTANTS.fromRoute.chartTemp" class="chart-header__tool" @click="showFullScreen">
+        <el-tooltip :content="$t('dashboard.screen')" effect="light" placement="top">
+           <i class="nz-icon nz-icon-maxview tool__icon"></i>
+        </el-tooltip>
+      </span>
+      <span class="chart-header__tool">
+        <el-dropdown v-clickoutside="clickos" trigger="click">
+          <i class="el-icon-more tool__icon" @click.stop="dropdownMenuShow = !dropdownMenuShow"></i>
+          <el-dropdown-menu style="display: none"></el-dropdown-menu>
+          <ul v-show="dropdownMenuShow" slot="dropdown" class="el-dropdown-menu nz-chart-dropdown">
+            <li class="el-dropdown-menu__item" @click="editChart">
+              <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i>
+              <span>{{$t('dashboard.edit')}}</span>
+            </li>
+            <li v-has="'panel_chart_delete'" class="el-dropdown-menu__item" @click="removeChart">
+              <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>
+              <span>{{$t('dashboard.delete')}}</span>
+            </li>
+            <li v-has="'panel_chart_add'" class="el-dropdown-menu__item" @click="duplicate">
+              <i class="el-icon-copy-document" style="font-size: 16px;"></i>
+              <span>{{$t('dashboard.duplicate')}}</span>
+            </li>
+            <li v-if="from !== this.$CONSTANTS.fromRoute.chartTemp && chartInfo.pid" v-has="'panel_chart_edit'" class="el-dropdown-menu__item" @click="$emit('sync')">
+              <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>
+              <span>{{$t('overall.syncChart')}}</span>
+            </li>
+          </ul>
+        </el-dropdown>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'chartHeader',
+  props: {
+    chartInfo: Object,
+    from: String
+  },
+  data () {
+    return {
+      dropdownMenuShow: false
+    }
+  },
+  methods: {
+    showFullScreen () {
+
+    },
+    refreshChart () {
+
+    },
+    editChart () {
+
+    },
+    removeChart () {
+
+    },
+    duplicate () {
+
+    },
+    clickos () {
+      this.dropdownMenuShow = false
+    }
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue
new file mode 100644
index 000000000..c588bc886
--- /dev/null
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -0,0 +1,122 @@
+<template>
+  <div :id='`chartList${timestamp}`' class="chart-list">
+    <grid-layout
+      :col-num="12"
+      :is-draggable="!panelLock"
+      :is-resizable="!panelLock"
+      :layout.sync="copyDataList"
+      :margin="[10, 10]"
+      :row-height="stepWidth"
+      :use-css-transforms="true"
+      :vertical-compact="true"
+    >
+      <grid-item
+        v-for="(item, index) in copyDataList"
+        :key="item.id"
+        :h="item.h"
+        :i="item.i"
+        :w="item.w"
+        :x="item.x"
+        :y="item.y"
+        dragAllowFrom=".chart-header"
+        dragIgnoreFrom=".chart-header__tools"
+        @resize="resizeEvent"
+        @resized="resizedEvent"
+        @container-resized="containerResizedEvent"
+      >
+        <panel-chart
+          :ref="'chart' + item.id"
+          :chart-info="item"
+        ></panel-chart>
+      </grid-item>
+    </grid-layout>
+
+    <div v-if="noData" class="no-data">
+      <svg aria-hidden="true" class="icon">
+        <use xlink:href="#nz-icon-no-data-panel"></use>
+      </svg>
+      <div class="no-data-div">No data</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VueGridLayout from 'vue-grid-layout'
+import { fromRoute } from '@/components/common/js/constants'
+import bus from '@/libs/bus'
+import chartTempData from '@/components/charts/chartTempData'
+import axios from 'axios'
+import chartDataFormat from '@/components/charts/chartDataFormat'
+import panelChart from '@/components/chart/panelChart'
+
+export default {
+  name: 'chartList',
+  props: {
+    // TODO isModel
+    from: { type: String },
+    obj: Object,
+    panelLock: { type: Boolean, default: true },
+    dataList: Array // 看板中所有图表信息
+  },
+  components: {
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem,
+    panelChart
+  },
+  data () {
+    return {
+      fromRoute,
+      filter: {}, // chart列表查询条件
+      copyDataList: [],
+      noData: false, // no data
+      // processedDataList: [], // 将dataList处理后的数据，组件中使用它不使用dataList
+      tempDom: { height: '', width: '' },
+      eventLog: [],
+      stepWidth: null,
+      timestamp: new Date().getTime()
+    }
+  },
+  methods: {
+    init () {
+      const dom = document.getElementById(`chartList${this.timestamp}`)
+      if (dom) {
+        this.stepWidth = Math.floor(dom.offsetWidth / 12)
+        const span = document.querySelector('.temp-dom')
+        this.tempDom.width = span.offsetWidth
+      }
+    },
+    resizeEvent (i, newH, newW, newHPx, newWPx) {
+      // TODO 分段重新渲染图表，或者暂时隐藏图表
+    },
+    resizedEvent (i, newH, newW, newHPx, newWPx) {
+      // TODO 重新渲染图表，向后端发送put请求
+    },
+    containerResizedEvent (i, newH, newW, newHPx, newWPx) {
+      // TODO 重新渲染图表
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  watch: {
+    dataList: {
+      deep: true,
+      handler (n, o) {
+        this.noData = !n || n.length < 1
+        this.copyDataList = n.map(item => {
+          return {
+            ...item,
+            i: item.id
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-list {
+  height: 100%;
+}
+</style>
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
new file mode 100644
index 000000000..a33fd5b32
--- /dev/null
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -0,0 +1,45 @@
+<template>
+  <!-- chart外层箱子 -->
+  <div class="panel-chart">
+    <!-- title和工具栏，支持浮动 -->
+    <chart-header
+      :chart-info="chartInfo"
+    ></chart-header>
+    <!-- chart -->
+    <div class="chart-container">
+      <!-- 数据获取后传入chart组件，chart组件内不发送查询请求，只根据接传递的数据来渲染 -->
+      <chart
+        :chart-data="chartData"
+        :chart-info="chartInfo"
+      ></chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import chartHeader from '@/components/chart/chartHeader'
+import chart from '@/components/chart/chart'
+export default {
+  name: 'panelChart',
+  components: {
+    chartHeader,
+    chart
+  },
+  props: {
+    chartInfo: Object
+  },
+  data () {
+    return {
+      chartData: null
+    }
+  },
+  methods: {
+    getChartData () {
+
+    }
+  },
+  mounted () {
+    this.getChartData()
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/chart/testData.js b/nezha-fronted/src/components/chart/testData.js
new file mode 100644
index 000000000..1c694d00c
--- /dev/null
+++ b/nezha-fronted/src/components/chart/testData.js
@@ -0,0 +1,452 @@
+const chartData = {
+  msg: 'success',
+  code: 200,
+  data: {
+    total: 3,
+    pageSize: -1,
+    pages: 1,
+    pageNo: 1,
+    list: [
+      {
+        id: 690483,
+        name: '123',
+        panelId: 1243,
+        groupId: 0,
+        span: 12,
+        height: 6,
+        updateBy: 1,
+        updateAt: '2021-11-10 07:06:09',
+        type: 'line',
+        unit: 2,
+        weight: 0,
+        param: {
+          last: 0,
+          legendValue: {
+            total: 'off',
+            min: 'off',
+            avg: 'off',
+            last: 'off',
+            max: 'off'
+          },
+          threshold: '',
+          valueMapping: {
+            mapping: [
+              {
+                color: {
+                  bac: '#fff',
+                  text: '#000'
+                },
+                text: '',
+                value: ''
+              }
+            ],
+            type: 'text'
+          },
+          state: '1',
+          url: '',
+          nullType: 'null'
+        },
+        pid: null,
+        buildIn: 0,
+        remark: '123',
+        seq: null,
+        x: 0,
+        y: 0,
+        w: 6,
+        h: 4,
+        i: 690483,
+        elements: [
+          {
+            id: 68527,
+            chartId: 690483,
+            expression: '123',
+            type: 'expert',
+            legend: '',
+            buildIn: 0,
+            seq: null
+          }
+        ],
+        sync: null,
+        panel: {
+          id: 1243,
+          name: 'test',
+          createBy: null,
+          type: null,
+          link: null,
+          pid: null,
+          weight: null,
+          buildIn: null,
+          seq: null,
+          children: null,
+          parent: null,
+          chartNum: null
+        },
+        group: {
+          id: 0,
+          name: null,
+          panelId: null,
+          groupId: null,
+          span: null,
+          height: null,
+          updateBy: null,
+          updateAt: null,
+          type: null,
+          unit: null,
+          weight: null,
+          param: null,
+          pid: null,
+          buildIn: null,
+          remark: null,
+          seq: null,
+          x: null,
+          y: null,
+          elements: null,
+          sync: null,
+          panel: null,
+          group: null,
+          children: null,
+          chartNums: null,
+          asset: null,
+          varType: null,
+          varId: null,
+          varName: null
+        },
+        children: [
+
+        ],
+        chartNums: null,
+        asset: null,
+        varType: null,
+        varId: null,
+        varName: null
+      },
+      {
+        id: 690500,
+        name: '233',
+        panelId: 1243,
+        groupId: 0,
+        span: 6,
+        height: 4,
+        updateBy: 1,
+        updateAt: '2021-11-10 09:05:13',
+        type: 'line',
+        unit: 2,
+        weight: 1,
+        param: {
+          last: 0,
+          legendValue: {
+            total: 'off',
+            min: 'off',
+            avg: 'off',
+            last: 'off',
+            max: 'off'
+          },
+          threshold: '',
+          valueMapping: {
+            mapping: [
+              {
+                color: {
+                  bac: '#fff',
+                  text: '#000'
+                },
+                text: '',
+                value: ''
+              }
+            ],
+            type: 'text'
+          },
+          url: '',
+          nullType: 'null'
+        },
+        pid: null,
+        buildIn: 0,
+        remark: '',
+        seq: null,
+        x: 6,
+        y: 0,
+        w: 3,
+        h: 4,
+        i: 690484,
+        elements: [
+          {
+            id: 68542,
+            chartId: 690500,
+            expression: '233',
+            type: 'expert',
+            legend: '',
+            buildIn: 0,
+            seq: null
+          }
+        ],
+        sync: null,
+        panel: {
+          id: 1243,
+          name: 'test',
+          createBy: null,
+          type: null,
+          link: null,
+          pid: null,
+          weight: null,
+          buildIn: null,
+          seq: null,
+          children: null,
+          parent: null,
+          chartNum: null
+        },
+        group: {
+          id: 0,
+          name: null,
+          panelId: null,
+          groupId: null,
+          span: null,
+          height: null,
+          updateBy: null,
+          updateAt: null,
+          type: null,
+          unit: null,
+          weight: null,
+          param: null,
+          pid: null,
+          buildIn: null,
+          remark: null,
+          seq: null,
+          x: null,
+          y: null,
+          elements: null,
+          sync: null,
+          panel: null,
+          group: null,
+          children: null,
+          chartNums: null,
+          asset: null,
+          varType: null,
+          varId: null,
+          varName: null
+        },
+        children: [
+
+        ],
+        chartNums: null,
+        asset: null,
+        varType: null,
+        varId: null,
+        varName: null
+      },
+      {
+        id: 690501,
+        name: '323',
+        panelId: 1243,
+        groupId: 0,
+        span: 6,
+        height: 4,
+        updateBy: 1,
+        updateAt: '2021-11-10 09:51:06',
+        type: 'group',
+        unit: 2,
+        weight: 2,
+        param: {
+          last: 0,
+          legendValue: {
+            total: 'off',
+            min: 'off',
+            avg: 'off',
+            last: 'off',
+            max: 'off'
+          },
+          threshold: '',
+          valueMapping: {
+            mapping: [
+              {
+                color: {
+                  bac: '#fff',
+                  text: '#000'
+                },
+                text: '',
+                value: ''
+              }
+            ],
+            type: 'text'
+          },
+          url: '',
+          nullType: 'null'
+        },
+        pid: null,
+        buildIn: 0,
+        remark: '123',
+        seq: null,
+        x: 0,
+        y: 4,
+        w: 6,
+        h: 4,
+        i: 690485,
+        elements: null,
+        sync: null,
+        panel: {
+          id: 1243,
+          name: 'test',
+          createBy: null,
+          type: null,
+          link: null,
+          pid: null,
+          weight: null,
+          buildIn: null,
+          seq: null,
+          children: null,
+          parent: null,
+          chartNum: null
+        },
+        group: {
+          id: 0,
+          name: null,
+          panelId: null,
+          groupId: null,
+          span: null,
+          height: null,
+          updateBy: null,
+          updateAt: null,
+          type: null,
+          unit: null,
+          weight: null,
+          param: null,
+          pid: null,
+          buildIn: null,
+          remark: null,
+          seq: null,
+          x: null,
+          y: null,
+          elements: null,
+          sync: null,
+          panel: null,
+          group: null,
+          children: null,
+          chartNums: null,
+          asset: null,
+          varType: null,
+          varId: null,
+          varName: null
+        },
+        children: [
+          {
+            id: 690502,
+            name: '123',
+            panelId: 1243,
+            groupId: 690501,
+            span: 12,
+            height: 4,
+            updateBy: 1,
+            updateAt: '2021-11-10 09:51:15',
+            type: 'line',
+            unit: 2,
+            weight: 3,
+            param: {
+              last: 0,
+              legendValue: {
+                total: 'off',
+                min: 'off',
+                avg: 'off',
+                last: 'off',
+                max: 'off'
+              },
+              threshold: '123',
+              valueMapping: {
+                mapping: [
+                  {
+                    color: {
+                      bac: '#fff',
+                      text: '#000'
+                    },
+                    text: '',
+                    value: ''
+                  }
+                ],
+                type: 'text'
+              },
+              url: '',
+              nullType: 'null'
+            },
+            pid: null,
+            buildIn: 0,
+            remark: '',
+            seq: null,
+            x: 0,
+            y: 0,
+            w: 12,
+            h: 4,
+            i: 690489,
+            elements: [
+              {
+                id: 68543,
+                chartId: 690502,
+                expression: '123',
+                type: 'expert',
+                legend: '',
+                buildIn: 0,
+                seq: null
+              }
+            ],
+            sync: null,
+            panel: {
+              id: 1243,
+              name: 'test',
+              createBy: null,
+              type: null,
+              link: null,
+              pid: null,
+              weight: null,
+              buildIn: null,
+              seq: null,
+              children: null,
+              parent: null,
+              chartNum: null
+            },
+            group: {
+              id: 690501,
+              name: '123',
+              panelId: null,
+              groupId: null,
+              span: null,
+              height: null,
+              updateBy: null,
+              updateAt: null,
+              type: null,
+              unit: null,
+              weight: null,
+              param: null,
+              pid: null,
+              buildIn: null,
+              remark: null,
+              seq: null,
+              x: null,
+              y: null,
+              elements: null,
+              sync: null,
+              panel: null,
+              group: null,
+              children: null,
+              chartNums: null,
+              asset: null,
+              varType: null,
+              varId: null,
+              varName: null
+            },
+            children: [
+
+            ],
+            chartNums: null,
+            asset: null,
+            varType: null,
+            varId: null,
+            varName: null
+          }
+        ],
+        chartNums: null,
+        asset: null,
+        varType: null,
+        varId: null,
+        varName: null
+      }
+    ]
+  },
+  time: '2021-11-10 09:51:27'
+}
+export default chartData
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index a4778841c..f9aa40133 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -8,7 +8,7 @@
       </div>
       <div class="main-container">
         <div class="top-tools">
-          <div v-if="panelData.length == 0" class="top-tool-left" style="margin-left: 10px;">
+          <div v-if="panelData.length === 0" class="top-tool-left" style="margin-left: 10px;">
             <button id="panel-add-panel" class="nz-btn nz-btn-style-light nz-btn-size-small" @click="toAdd"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t("dashboard.panel.createPanelTitleSec")}}</button>
           </div>
           <template v-else>
@@ -80,9 +80,19 @@
           </template>
         </div>
         <div id="tableList" class="table-list">
-          <div id="dashboardScrollbar" ref="dashboardScrollbar" class="table-list-box" style="height: calc(100% - 20px); overflow: auto;">
+          <div id="dashboardScrollbar" ref="dashboardScrollbar" class="table-list-box" style="overflow: auto;">
             <div class="box-content" v-loading="chartListLoading">
-              <chart-list ref="chartList" :class="{'show-top':showTopBtn}" :from="fromRoute.panel" :panel-lock="panelLock" @on-edit-chart="editChart" @on-refresh-time="refreshTime"  @on-remove-chart="delChart" @panel-list-loading="load" @on-add-group-item-chart="addGroupItem"></chart-list>
+              <chart-list
+                ref="chartList"
+                :class="{'show-top':showTopBtn}"
+                :data-list="dataList"
+                :from="fromRoute.panel"
+                :panel-lock="panelLock"
+                @on-edit-chart="editChart"
+                @on-refresh-time="refreshTime"
+                @on-remove-chart="delChart"
+                @on-add-group-item-chart="addGroupItem"
+              ></chart-list>
             </div>
           </div>
         </div>
@@ -105,15 +115,15 @@
 
 <script>
 import ChartBox from './chartBox'
-import ChartList from '../../charts/chart-list'
+import ChartList from '../../chart/chartList'
 import bus from '../../../libs/bus'
 import pickTime from '../../common/pickTime'
 import selectPanel from '../../common/popBox/selectPanel'
 import panelBox from '@/components/common/rightBox/panelBox'
 import chartTempBox from '@/components/common/rightBox/chartTempBox'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
-import Template from '@/components/page/config/template'
 import { fromRoute } from '@/components/common/js/constants'
+import chartData from '@/components/chart/testData'
 
 export default {
   name: 'panel',
@@ -122,7 +132,7 @@ export default {
       fromRoute,
       overScroll10: false,
       isLoading: true,
-      panelLock: true,
+      panelLock: false,
       showTopBtn: false, // top按钮
       visible: false,
       chartListLoading: true,
@@ -170,7 +180,6 @@ export default {
         panelId: '',
         varIds: []
       },
-      chartsData: [], // 中间部分图表相关数据
       panelData: [],
       panelDataDragTmp: [],
       searchMsg: { // 给搜索框子组件传递的信息
@@ -219,7 +228,6 @@ export default {
     }
   },
   components: {
-    Template,
     'chart-box': ChartBox,
     'chart-list': ChartList,
     'pick-time': pickTime,
@@ -251,7 +259,7 @@ export default {
       this.filter.start_time = bus.timeFormate(curTime[0], 'yyyy-MM-dd hh:mm:ss')
       this.filter.end_time = bus.timeFormate(curTime[1], 'yyyy-MM-dd hh:mm:ss')
       // this.$refs.chartList.initCurrentRecordNum();
-      this.$refs.chartList.cleanData()
+      // this.$refs.chartList.cleanData()
       this.getData(this.filter)
     },
 
@@ -405,12 +413,12 @@ export default {
             this.rightBox.chart.show = false
             const chartList = this.$refs.chartList.dataList
             for (let i = 0; i < chartList.length; i++) {
-              if (chartList[i].id === data.id) {
+              /*if (chartList[i].id === data.id) {
                 chartList.splice(i, 1)
               }
               if (chartList[i].type === 'group') {
                 chartList[i].children = chartList[i].children.filter((item) => item.id !== data.id)
-              }
+              }*/
               // if(data.next != -1){
               //   if(chartList[i].id === data.next){
               //     nextChart = chartList[i]
@@ -422,7 +430,7 @@ export default {
               //   }
               // }
             }
-            this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop)
+            //this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop)
             // if(nextChart&&prevChart){ //删除图表为中间位置
             //   prevChart.next = nextChart.id;
             //   nextChart.prev = prevChart.id;
@@ -448,9 +456,11 @@ export default {
     },
     // 获取数据,用在子页面
     getData (params) {
+      console.info(0)
       if (!this.hasButton('panel_view')) {
         return
       }
+      this.chartListLoading = true
       if (params.start_time === '' || params.end_time === '') {
         const now = bus.getTimezontDateRange()
         const endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss')
@@ -458,10 +468,19 @@ export default {
         params.start_time = startTimeTmp
         params.end_time = endTimeTmp
       }
-      if (this.$refs.chartList) {
-        this.$refs.chartList.initData(params)
-      }
-      // this.panelReloadOnlyPanel();
+      this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
+        if (response.code === 200) {
+          console.info(1)
+          this.chartListLoading = false
+          this.dataList = chartData.data.list.map(item => {
+            return {
+              ...item,
+              hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
+              loaded: false
+            }
+          })
+        }
+      })
     },
 
     /* 图表相关操作--end */
@@ -636,7 +655,7 @@ export default {
     },
     search: function () {
       if (this.$refs.chartList) {
-        this.$refs.chartList.searchCharts(this.filter.searchName)
+        // this.$refs.chartList.searchCharts(this.filter.searchName)
       }
     },
     // 滚动事件触发下拉加载
@@ -645,7 +664,7 @@ export default {
       this.scrollbarWrap.addEventListener('scroll', bus.debounce(function () {
         _self.showTopBtn = _self.scrollbarWrap.scrollTop > 50
         _self.overScroll10 = _self.scrollbarWrap.scrollTop > 50
-        _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop)
+        // _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop)
       }, 300))
     },
     focusInput () {
@@ -683,13 +702,6 @@ export default {
           wrap.scrollTop = currentTop
         }
       }, 20)
-    },
-    load (dataList) {
-      if (dataList.length > 0) {
-        this.chartListLoading = false
-      } else {
-        this.chartListLoading = !dataList.length === 0
-      }
     }
   },
   created () {