From 4c2bca6c768949e3bfd0b1b173c2b2a739d4bdb4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-FUDKNA8\\znjsz" <tonystark@starkindustries.mil>
Date: Wed, 10 Apr 2024 09:33:09 +0800
Subject: [PATCH] add fto&chip-invest

---
 src/views/dashboard/charts/ChipInvest.vue     | 37 +++++++++++++++++++
 src/views/dashboard/charts/Fto.vue            | 37 +++++++++++++++++++
 .../dashboard/components/ChartContainer.vue   | 34 +++++++++++++++++
 src/views/dashboard/components/Container.vue  |  6 ++-
 src/views/index.vue                           | 34 ++++++++++++++---
 5 files changed, 140 insertions(+), 8 deletions(-)
 create mode 100644 src/views/dashboard/charts/ChipInvest.vue
 create mode 100644 src/views/dashboard/charts/Fto.vue
 create mode 100644 src/views/dashboard/components/ChartContainer.vue

diff --git a/src/views/dashboard/charts/ChipInvest.vue b/src/views/dashboard/charts/ChipInvest.vue
new file mode 100644
index 0000000..fc7243f
--- /dev/null
+++ b/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>
diff --git a/src/views/dashboard/charts/Fto.vue b/src/views/dashboard/charts/Fto.vue
new file mode 100644
index 0000000..37df3c3
--- /dev/null
+++ b/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>
diff --git a/src/views/dashboard/components/ChartContainer.vue b/src/views/dashboard/components/ChartContainer.vue
new file mode 100644
index 0000000..38b61a3
--- /dev/null
+++ b/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>
diff --git a/src/views/dashboard/components/Container.vue b/src/views/dashboard/components/Container.vue
index 9d36868..a721061 100644
--- a/src/views/dashboard/components/Container.vue
+++ b/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;
   }
diff --git a/src/views/index.vue b/src/views/index.vue
index 5cbfb99..caa783f 100644
--- a/src/views/index.vue
+++ b/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 {
@@ -169,7 +191,7 @@ export default {
   z-index: 9998;
   width: 1.702vw;
   height: 1.702vw;
- /* 
+  /* 
   width: 32px;
   height: 32px; 
   */