feat: panel布局、单值图、line图等

src/views/charts/Panel.vue

@@ -1,38 +1,73 @@
 <template>
-  <div>{{panel}}</div>
+  <div class="cn-panel">
+    <chart v-for="(chart, index) in chartList" :key="index" :chart="chart"></chart>
+<!--    <grid-layout v-model:layout="chartList"
+                 :col-num="12"
+                 :row-height="30"
+                 :is-draggable="draggable"
+                 :is-resizable="resizable"
+                 :vertical-compact="compact"
+                 :use-css-transforms="true"
+    >
+      <grid-item v-for="item in chartList" :key="item.i"
+                 :x="item.x"
+                 :y="item.y"
+                 :w="item.w"
+                 :h="item.h"
+                 :i="item.i"
+      >
+        <span class="text">{{ item.i }}</span>
+      </grid-item>
+    </grid-layout>-->
+  </div>
 </template>
 
 <script>
 import { useRoute } from 'vue-router'
+import { ref } from 'vue'
 import { panelTypeAndRouteMapping } from '@/utils/constants'
-import { api, getPanelList } from '@/utils/api'
+import { api, getPanelList, getChartList } from '@/utils/api'
+import Chart from './Chart'
 
 export default {
   name: 'Panel',
+  components: {
+    Chart
+  },
   data () {
     return {
-      panel: {}
+
     }
   },
+  methods: {
+  },
   async mounted () {
     const panels = await getPanelList({ type: this.panelType })
     if (panels && panels.length > 0) {
       this.panel = panels[0]
     }
+    if (this.panel.id) {
+      this.chartList = (await getChartList({ panelId: this.panel.id })).map(chart => {
+        chart.i = chart.id
+        return chart
+      })
+    }
   },
   setup () {
-    // 取得panel的type
-    let panelType = 1
+    const chartList = ref([])
+    const panel = ref({})
+    let panelType = 1 // 取得panel的type
     const { params } = useRoute()
     panelTypeAndRouteMapping[params.typeName] && (panelType = panelTypeAndRouteMapping[params.typeName])
     return {
       panelType,
+      chartList,
+      panel,
       api
     }
   }
 }
 </script>
-
-<style>
-
+<style lang="scss">
+@import '~@/components/charts/panel.scss';
 </style>