From fecc1f5be0630146ce50fcf7e3976eef286c5978 Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Thu, 23 May 2024 22:57:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=85=E6=A0=BC=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E2=80=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/components/data-box2.vue    |  40 +++++++
 src/views/home/components/finance copy.vue | 133 ---------------------
 2 files changed, 40 insertions(+), 133 deletions(-)
 create mode 100644 src/views/home/components/data-box2.vue
 delete mode 100644 src/views/home/components/finance copy.vue

diff --git a/src/views/home/components/data-box2.vue b/src/views/home/components/data-box2.vue
new file mode 100644
index 0000000..646355d
--- /dev/null
+++ b/src/views/home/components/data-box2.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="data-box">
+    <a-row :gutter="[16, 16]">
+      <a-col :xs="24" :sm="24" :xl="16">
+        <div>
+          <span class="data-title">销售额趋势</span>
+          <span class="data-subtext">单位：元</span>
+        </div>
+        <SellHistogram />
+      </a-col>
+      <a-col :xs="24" :sm="24" :xl="8">
+        <div>
+          <span class="data-title">现金分析</span>
+          <span class="data-subtext">单位：元</span>
+        </div>
+        <MonthlyAnalysis />
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SellHistogram from "@/views/home/components/sell-histogram.vue";
+import MonthlyAnalysis from "@/views/home/components/monthly-analysis.vue";
+</script>
+
+<style lang="scss" scoped>
+.data-box {
+  margin-top: calc($padding * 2);
+  // border: 1px solid red;
+  .data-title {
+    font-size: $font-size-body-3;
+    color: $color-text-1;
+  }
+  .data-subtext {
+    font-size: $font-size-body-2;
+    color: $color-text-2;
+  }
+}
+</style>
diff --git a/src/views/home/components/finance copy.vue b/src/views/home/components/finance copy.vue
deleted file mode 100644
index edee194..0000000
--- a/src/views/home/components/finance copy.vue	
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-  <div class="finance-box">
-    <div class="box-title">
-      <div>财务指标</div>
-      <div>
-        <span><icon-edit /></span>
-        <span class="margin-left-text">自定义</span>
-      </div>
-    </div>
-    <a-divider :margin="16" />
-    <!-- <div class="finance-card"> -->
-    <a-grid class="finance-card" :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }" :col-gap="12" :row-gap="16">
-      <a-grid-item v-for="(item, index) in financeData" :key="index">
-        <a-card hoverable class="finance-a-card" :class="'animated-fade-up-' + index">
-          <div class="finance-nav">
-            <div class="tag-dot" :style="{ border: `3px solid ${item.color}` }"></div>
-            <span class="finance-nav-title">{{ item.title }}</span>
-          </div>
-          <a-statistic
-            :value-style="{
-              fontSize: '13px',
-              marginLeft: '16px',
-              marginTop: '12px'
-            }"
-            :value="item.value"
-            :value-from="0"
-            :start="true"
-            animation
-            show-group-separator
-          />
-        </a-card>
-      </a-grid-item>
-    </a-grid>
-    <!-- <a-card
-        hoverable
-        v-for="(item, index) in financeData"
-        :key="index"
-        class="finance-a-card"
-        :class="'animated-fade-up-' + index"
-      >
-        <div class="finance-nav">
-          <div class="tag-dot" :style="{ border: `3px solid ${item.color}` }"></div>
-          <span class="finance-nav-title">{{ item.title }}</span>
-        </div>
-        <a-statistic
-          :value-style="{
-            fontSize: '13px',
-            marginLeft: '16px',
-            marginTop: '12px'
-          }"
-          :value="item.value"
-          :value-from="0"
-          :start="true"
-          animation
-          show-group-separator
-        />
-      </a-card> -->
-    <!-- </div> -->
-  </div>
-</template>
-
-<script setup lang="ts">
-const financeData = ref([
-  {
-    id: 1,
-    title: "利润总额",
-    value: 100000,
-    color: "#ff8625"
-  },
-  {
-    id: 2,
-    title: "现金",
-    value: 750420,
-    color: "#165DFF"
-  },
-  {
-    id: 3,
-    title: "银行存款",
-    value: 100000,
-    color: "#39cbab"
-  },
-  {
-    id: 4,
-    title: "存贷",
-    value: 100000,
-    color: "#6c73ff"
-  },
-  {
-    id: 5,
-    title: "应收账款",
-    value: 100000,
-    color: "#2fd0ff"
-  }
-]);
-</script>
-
-<style lang="scss" scoped>
-.finance-box {
-  margin-top: calc($padding * 2);
-  .finance-card {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: $padding;
-    grid-row-gap: 0px;
-    border: 1px solid cyan;
-    .finance-a-card {
-      .finance-nav {
-        display: flex;
-        align-items: center;
-        border: 1px solid red;
-        .tag-dot {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          margin-right: $margin-text;
-          box-sizing: border-box;
-        }
-        .finance-nav-title {
-          font-size: $font-size-body-1;
-        }
-      }
-    }
-  }
-}
-.box-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: $font-size-body-3;
-  color: $color-text-1;
-}
-</style>