src/views/dashboard/charts/ChipInvest.vue

@@ -0,0 +1,37 @@
+<!-- 
+    filename: chip-invest.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <chart-container class="chip-invest-chart">
+    <div class="chart-title">chip-invest</div>
+    <div class="chart-body">
+      <div class="chart-item">chip-invest</div>
+      <div class="chart-item">chip-invest</div>
+      <div class="chart-item">chip-invest</div>
+      <div class="chart-item">chip-invest</div>
+    </div>
+  </chart-container>
+</template>
+
+<script>
+import ChartContainerVue from "../components/ChartContainer.vue";
+
+export default {
+  name: "chip-investChart",
+  components: {
+    ChartContainer: ChartContainerVue,
+  },
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/dashboard/charts/Fto.vue

@@ -0,0 +1,37 @@
+<!-- 
+    filename: fto.vue
+    author: liubin
+    date: 2024-04-10 08:59:28
+    description: 
+-->
+
+<template>
+  <chart-container class="fto-chart">
+    <div class="chart-title">FTO</div>
+    <div class="chart-body">
+      <div class="chart-item">FTO</div>
+      <div class="chart-item">FTO</div>
+      <div class="chart-item">FTO</div>
+      <div class="chart-item">FTO</div>
+    </div>
+  </chart-container>
+</template>
+
+<script>
+import ChartContainerVue from "../components/ChartContainer.vue";
+
+export default {
+  name: "FtoChart",
+  components: {
+    ChartContainer: ChartContainerVue,
+  },
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/dashboard/components/ChartContainer.vue

@@ -0,0 +1,34 @@
+<!-- 
+    filename: ChartContainer.vue
+    author: liubin
+    date: 2024-04-10 08:54:33
+    description: 
+    todo: 实现滑动条 和动态宽高
+-->
+
+<template>
+  <div class="chart-container">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChartContainer",
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.chart-container {
+  background: #151516;
+  height: 100%;
+  flex: 1;
+}
+</style>

src/views/dashboard/components/Container.vue

@@ -25,7 +25,9 @@
       :class="[
         side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
       ]"
-    ></div>
+    >
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -82,7 +84,7 @@ export default {
   }
 
   .container-body {
-    padding: 8px;
+    padding: 12px;
     display: flex;
     flex: 1;
   }

src/views/index.vue

@@ -5,13 +5,29 @@
         <db-header class="db-header"></db-header>
         <div class="db-body">
           <div class="db-left">
-            <db-container icon="cube" title="FTO投入"></db-container>
-            <db-container icon="chip" title="芯片投入"></db-container>
+            <db-container icon="cube" title="FTO投入">
+              <fto-chart />
+            </db-container>
+            <db-container icon="chip" title="芯片投入">
+              <chip-invest-chart />
+            </db-container>
           </div>
           <div class="db-right">
-            <db-container side="right" icon="chip2" title="芯片产出"></db-container>
-            <db-container side="right" icon="std" title="标准组件产出"></db-container>
-            <db-container side="right" icon="stack" title="BIPV产出"></db-container>
+            <db-container
+              side="right"
+              icon="chip2"
+              title="芯片产出"
+            ></db-container>
+            <db-container
+              side="right"
+              icon="std"
+              title="标准组件产出"
+            ></db-container>
+            <db-container
+              side="right"
+              icon="stack"
+              title="BIPV产出"
+            ></db-container>
           </div>
         </div>
       </div>
@@ -30,6 +46,9 @@ import store from "@/store";
 import DashboardHeader from "./dashboard/components/Header.vue";
 import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
 import Container from "./dashboard/components/Container.vue";
+import ChartContainer from "./dashboard/components/ChartContainer.vue";
+import FtoChart from "./dashboard/charts/Fto.vue";
+import ChipInvestChart from './dashboard/charts/ChipInvest.vue';
 
 export default {
   name: "Index",
@@ -37,6 +56,9 @@ export default {
     CompanyInfo,
     DbHeader: DashboardHeader,
     DbContainer: Container,
+    ChartContainer,
+    FtoChart,
+    ChipInvestChart
   },
   data() {
     return {