feat: dashboard定义

src/views/charts2/Chart.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="cn-chart" style="background-color: lightgray;height: 100%;">
+    <loading :loading="loading"></loading>
+    <chart-no-data v-if="isNoData"></chart-no-data>
+    <network-overview-line
+      v-if="chart.type === typeMapping.networkOverview.line"
+    ></network-overview-line>
+  </div>
+</template>
+
+<script>
+import Loading from '@/components/common/Loading'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
+import { typeMapping } from '@/views/charts2/chart-tools'
+import NetworkOverviewLine from '@/views/charts2/charts/NetworkOverviewLine';
+export default {
+  name: 'Chart',
+  components: {
+    Loading,
+    ChartNoData,
+    NetworkOverviewLine
+  },
+  props: {
+    chart: Object
+  },
+  data () {
+    return {
+      typeMapping,
+      loading: false,
+      isNoData: false
+    }
+  }
+}
+</script>

src/views/charts2/ChartList.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="chart-list" ref="layoutBox">
+    <grid-layout
+        id="gridLayout"
+        ref="layout"
+        v-model:layout="layout"
+        :col-num="24"
+        :is-draggable="!panelLock"
+        :is-resizable="!panelLock"
+        :margin="[20, 20]"
+        :row-height="40"
+        :vertical-compact="true"
+        :use-css-transforms="false"
+    >
+      <grid-item v-for="item in layout"
+                 :x="item.x"
+                 :y="item.y"
+                 :w="item.w"
+                 :h="item.h"
+                 :i="item.i"
+                 :key="item.i">
+        <chart
+          :chart="item"
+        ></chart>
+      </grid-item>
+    </grid-layout>
+  </div>
+</template>
+
+<script>
+import VueGridLayout from 'vue-grid-layout'
+import _ from 'lodash'
+import Chart from '@/views/charts2/Chart'
+export default {
+  name: 'ChartList',
+  props: {
+    timeFilter: Object,
+    chartList: Array,
+    panelLock: Boolean,
+    entity: Object
+  },
+  data () {
+    return {
+      layout: []
+    }
+  },
+  components: {
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem,
+    Chart
+  },
+  watch: {
+    chartList (n) {
+      if (!_.isEmpty(n)) {
+        this.layout = [...n]
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/charts2/Panel.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="panel-box">
+    <div class="panel__header">
+      <div class="panel__title">{{panel.i18n ? $t(panel.i18n) : panel.name}}</div>
+      <div class="panel__time">
+        <date-time-range
+            class="date-time-range"
+            :start-time="timeFilter.startTime"
+            :end-time="timeFilter.endTime"
+            :date-range="timeFilter.dateRangeValue"
+            ref="dateTimeRange"
+            @change="reload"
+        />
+        <time-refresh
+            class="date-time-range"
+            @change="timeRefreshChange"
+            :end-time="timeFilter.endTime"
+        />
+      </div>
+    </div>
+    <chart-list
+        ref="chartList"
+        :time-filter="timeFilter"
+        :chart-list="chartList"
+        :panel-lock="panelLock"
+        :entity="entity"
+    ></chart-list>
+  </div>
+</template>
+
+<script>
+import { useRoute } from 'vue-router'
+import { ref } from 'vue'
+import { panelTypeAndRouteMapping } from '@/utils/constants'
+import { getPanelList, getChartList } from '@/utils/api'
+import { getNowTime } from '@/utils/date-util'
+import { getTypeCategory } from '@/views/charts/charts/tools'
+import ChartList from '@/views/charts2/ChartList'
+
+export default {
+  name: 'Panel',
+  props: {
+    entity: Object,
+    typeName: String
+  },
+  components: {
+    ChartList
+  },
+  data () {
+    return {
+      chartList: [], // 普通panel的chart
+      panelLock: true
+    }
+  },
+  async mounted () {
+    await this.init()
+  },
+  setup (props, ctx) {
+    const panel = ref({})
+    let panelType = 1 // 取得panel的type
+    const { params } = useRoute()
+    panelType = props.entity ? props.entity.type : panelTypeAndRouteMapping[params.typeName]
+
+    function isEntityDetail (t) {
+      return [4, 5, 6].indexOf(t) > -1
+    }
+    // date
+    const dateRangeValue = isEntityDetail(panelType) ? 60 * 24 : 60
+    const { startTime, endTime } = getNowTime(dateRangeValue)
+    const timeFilter = ref({ startTime, endTime, dateRangeValue })
+
+    return {
+      panelType,
+      panel,
+      timeFilter
+    }
+  },
+  methods: {
+    async init () {
+      const panels = await getPanelList({ type: this.panelType })
+      if (panels && panels.length > 0) {
+        this.panel = panels[0]
+      }
+      if (this.panel.id) {
+        if (this.panel.params) {
+          this.panel.params = JSON.parse(this.panel.params)
+        } else {
+          this.panel.params = {}
+        }
+        this.chartList = (await getChartList({ panelId: this.panel.id, pageSize: -1 })).map(chart => {
+          chart.i = chart.id
+          // 递归初始化各属性
+          this.initChartAttr(chart)
+          return chart
+        })
+      }
+    },
+    initChartAttr (chart) {
+      chart.i = chart.id
+      chart.category = getTypeCategory(chart.type)
+      // 初始化params
+      chart.params = chart.params ? JSON.parse(chart.params) : {}
+      chart.firstShow = false
+      if (!this.$_.isEmpty(chart.children)) {
+        chart.children.forEach(c => {
+          this.initChartAttr(c)
+        })
+      }
+    },
+    timeRefreshChange (startTime, endTime, dateRangeValue) {
+
+    },
+    reload () {
+
+    }
+  }
+}
+</script>

src/views/charts2/chart-tools.js

@@ -0,0 +1,9 @@
+export const typeMapping = {
+  networkOverview: {
+    line: 102,
+    appList: 103,
+    performanceEvent: 302,
+    table: 601,
+    ddosDetection: 701
+  }
+}

src/views/charts2/charts/NetworkOverviewLine.vue

@@ -0,0 +1,9 @@
+<template>
+呵呵
+</template>
+
+<script>
+export default {
+  name: 'NetworkOverviewLine'
+}
+</script>

src/views/settings/Chart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%;">
     <cn-data-list
       ref="dataList"
       :tableId="tableId"

src/views/settings/GalaxyProxy.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%;">
     <cn-data-list
         ref="dataList"
         :tableId="tableId"

src/views/settings/I18n.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%;">
     <cn-data-list
         ref="dataList"
         :tableId="tableId"

src/views/settings/OperationLog.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%;">
     <cn-data-list
       ref="dataList"
       :api="url"

src/views/settings/Roles.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%;">
     <cn-data-list
             ref="dataList"
             :tableId="tableId"

src/views/settings/User.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%;">
     <cn-data-list
       ref="dataList"
       :tableId="tableId"