From 3b270eb50f42df37d22e094906ed9024f0489994 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Fri, 8 Sep 2023 14:16:17 +0800
Subject: [PATCH] add chart+tables

---
 src/components/yx-dark/containers/chart.vue | 30 +++++++++++
 src/components/yx-dark/containers/rect.vue  |  6 ++-
 src/components/yx-dark/containers/table.vue | 30 +++++++++++
 src/views/MainPanel.vue                     | 60 +++++++++++++++------
 4 files changed, 109 insertions(+), 17 deletions(-)
 create mode 100644 src/components/yx-dark/containers/chart.vue
 create mode 100644 src/components/yx-dark/containers/table.vue

diff --git a/src/components/yx-dark/containers/chart.vue b/src/components/yx-dark/containers/chart.vue
new file mode 100644
index 0000000..de5155b
--- /dev/null
+++ b/src/components/yx-dark/containers/chart.vue
@@ -0,0 +1,30 @@
+<!-- 
+    filename: chart.vue
+    author: liubin
+    date: 2023-09-08 13:53:04
+    description: 
+-->
+
+<template>
+  <div class="yx-dark-chart"></div>
+</template>
+
+<script>
+export default {
+  name: "YxDarkChart",
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.yx-dark-chart {
+  height: 100%;
+  background: #f003;
+}
+</style>
diff --git a/src/components/yx-dark/containers/rect.vue b/src/components/yx-dark/containers/rect.vue
index 1138cc0..ca5a6e6 100644
--- a/src/components/yx-dark/containers/rect.vue
+++ b/src/components/yx-dark/containers/rect.vue
@@ -6,7 +6,9 @@
 -->
 
 <template>
-  <div class="rect-container"></div>
+  <div class="rect-container">
+    <slot />
+  </div>
 </template>
 
 <script>
@@ -25,7 +27,7 @@ export default {
 <style scoped lang="scss">
 .rect-container {
   background: url(../../../assets/rect-bg.png) no-repeat 100% / contain; // rgba(45, 230, 196, 0.8);
-  padding: 0;
+  padding: 24px;
   width: 624px;
   height: 304px;
 }
diff --git a/src/components/yx-dark/containers/table.vue b/src/components/yx-dark/containers/table.vue
new file mode 100644
index 0000000..924cc05
--- /dev/null
+++ b/src/components/yx-dark/containers/table.vue
@@ -0,0 +1,30 @@
+<!-- 
+    filename: table.vue
+    author: liubin
+    date: 2023-09-08 13:52:12
+    description: 
+-->
+
+<template>
+  <div class="yx-dark-tables"></div>
+</template>
+
+<script>
+export default {
+  name: "YxDarkTables",
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.yx-dark-tables {
+  height: 100%;
+  background: #fff3;
+}
+</style>
diff --git a/src/views/MainPanel.vue b/src/views/MainPanel.vue
index ebbc272..3fc6f72 100644
--- a/src/views/MainPanel.vue
+++ b/src/views/MainPanel.vue
@@ -7,22 +7,50 @@
 
 <template>
   <div class="main-panel">
-    <RectContainer class="leftTop" />
-    <RectContainer class="leftMiddle" />
-    <RectContainer class="leftBottom" />
+    <RectContainer class="leftTop">
+      <TablesContainer />
+    </RectContainer>
+    <RectContainer class="leftMiddle">
+      <ChartContainer />
+    </RectContainer>
+    <RectContainer class="leftBottom">
+      <ChartContainer />
+    </RectContainer>
 
-    <RectContainer class="bottom-1" />
-    <RectContainer class="bottom-2" />
-    <RectContainer class="bottom-3" />
-    <RectContainer class="bottom-4" />
-    <RectContainer class="bottom-5" />
-    <RectContainer class="bottom-6" />
-    <RectContainer class="bottom-7" />
-    <RectContainer class="bottom-8" />
+    <RectContainer class="bottom-1">
+      <TablesContainer />
+    </RectContainer>
+    <RectContainer class="bottom-2">
+      <TablesContainer />
+    </RectContainer>
+    <RectContainer class="bottom-3">
+      <ChartContainer />
+    </RectContainer>
+    <RectContainer class="bottom-4">
+      <ChartContainer />
+    </RectContainer>
+    <RectContainer class="bottom-5">
+      <ChartContainer />
+    </RectContainer>
+    <RectContainer class="bottom-6">
+      <TablesContainer />
+    </RectContainer>
+    <RectContainer class="bottom-7">
+      <ChartContainer />
+    </RectContainer>
+    <RectContainer class="bottom-8">
+      <ChartContainer />
+    </RectContainer>
 
-    <RectContainer class="rightTop" />
-    <RectContainer class="rightMiddle" />
-    <RectContainer class="rightBottom" />
+    <RectContainer class="rightTop">
+      <ChartContainer />
+    </RectContainer>
+    <RectContainer class="rightMiddle">
+      <TablesContainer />
+    </RectContainer>
+    <RectContainer class="rightBottom">
+      <ChartContainer />
+    </RectContainer>
 
     <MainArea style="grid-area: main" />
   </div>
@@ -31,10 +59,12 @@
 <script>
 import RectContainer from "@/components/yx-dark/containers/rect.vue";
 import MainArea from "./MainArea.vue";
+import ChartContainer from "@/components/yx-dark/containers/chart.vue";
+import TablesContainer from "@/components/yx-dark/containers/table.vue";
 
 export default {
   name: "MainPanel",
-  components: { RectContainer, MainArea },
+  components: { RectContainer, MainArea, ChartContainer, TablesContainer },
   props: {},
   data() {
     return {};