NEZ-1254 feat: chart重构布局

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;

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;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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';

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 {

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart'
+}
+</script>
+
+<style scoped>
+
+</style>

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>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-bar'
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-clock'
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-diagram'
+}
+</script>
+
+<style scoped>
+
+</style>

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>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-gauge' // 仪表盘
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-group'
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-log' // 日志列表，纯日志，不再包含图形
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-pie'
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-stat'
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-table'
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-text'
+}
+</script>
+
+<style scoped>
+
+</style>

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>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-treemap' // 矩形树
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-url'
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'chart-value' // 单值图
+}
+</script>
+
+<style scoped>
+
+</style>

nezha-fronted/src/components/chart/chart/options/chartBar.js

@@ -0,0 +1,4 @@
+const chartBarOption = {
+
+}
+export default chartBarOption

nezha-fronted/src/components/chart/chart/options/chartGauge.js

@@ -0,0 +1,4 @@
+const chartGaugeOption = {
+
+}
+export default chartGaugeOption

nezha-fronted/src/components/chart/chart/options/chartPie.js

@@ -0,0 +1,4 @@
+const chartPieOption = {
+
+}
+export default chartPieOption

nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js

@@ -0,0 +1,9 @@
+export const chartTimeSeriesLineOption = {
+
+}
+export const chartTimeSeriesBarOption = {
+
+}
+export const chartTimeSeriesScatterOption = {
+
+}

nezha-fronted/src/components/chart/chart/options/chartTreemap.js

@@ -0,0 +1,4 @@
+const chartTreemapOption = {
+
+}
+export default chartTreemapOption

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 }

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>

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>

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>

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

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.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
-        this.$refs.chartList.initData(params)
+        if (response.code === 200) {
-      }
+          console.info(1)
-      // this.panelReloadOnlyPanel();
+          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 () {