From 926484334e1d77acb74cd8c6207b6910a8f488af Mon Sep 17 00:00:00 2001
From: ycy <2861518472@qq.com>
Date: Mon, 22 Apr 2024 18:00:58 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E9=A6=96=E9=A1=B5=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7=E5=9B=BE=E5=BD=A2=E9=83=A8=E5=88=86=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=20,=20=E5=8F=B3=E4=BE=A7=E6=96=87=E5=AD=97=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E6=9C=AA=E5=AE=8C=E6=88=90=20=E5=AE=8C=E6=88=90=E5=BA=A680%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/echarts/bar.vue           |  19 +++-
 src/components/echarts/pie.vue           |   4 +-
 src/views/home/components/homeCenter.vue |  35 ++++---
 src/views/home/components/homeFooter.vue | 114 +++++++++++++++++------
 src/views/home/index.vue                 |   2 +-
 5 files changed, 124 insertions(+), 50 deletions(-)

diff --git a/src/components/echarts/bar.vue b/src/components/echarts/bar.vue
index a266a94..ec230b6 100644
--- a/src/components/echarts/bar.vue
+++ b/src/components/echarts/bar.vue
@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import * as echarts from 'echarts'
+import type { AnalysisValidateResult } from 'tdesign-vue/es/form/const'
 import { onMounted, ref } from 'vue'
 
 // 定义图表容器引用
@@ -15,22 +16,22 @@ const { categories, seriesData, title, legendList } = defineProps({
   // 横坐标
   categories: {
     type: Array,
-    required: true
+    default: () => []
   },
   // 纵坐标
   seriesData: {
     type: Array,
-    required: true
+    default: () => []
   },
   // 标题
   title: {
     type: String,
-    required: true
+    default: ''
   },
   // 图例
   legendList: {
     type: Array,
-    required: true
+    default: () => []
   },
   // 宽度
   width: {
@@ -68,7 +69,15 @@ const option = {
   yAxis: {
     type: 'value'
   },
-  series: seriesData
+  series: seriesData.map((serie: any) => ({
+    ...serie,
+    itemStyle: {
+      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        { offset: 0, color: '#57c1ff' }, // 填充色开始颜色（可自定义）
+        { offset: 1, color: '#1a91ff' } // 填充色结束颜色（可自定义）
+      ])
+    }
+  }))
 }
 
 // 在组件挂载后初始化ECharts实例并设置选项
diff --git a/src/components/echarts/pie.vue b/src/components/echarts/pie.vue
index d1bd0d4..bf02565 100644
--- a/src/components/echarts/pie.vue
+++ b/src/components/echarts/pie.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="display: flex; justify-content: center">
     <div ref="pieChartRef" :style="{ width: width, height: height }"></div>
   </div>
 </template>
@@ -51,7 +51,7 @@ const option = {
       name: '访问来源',
       type: 'pie',
       radius: '50%',
-      left: '50',
+      left: '60',
       data: dataP,
       emphasis: {
         itemStyle: {
diff --git a/src/views/home/components/homeCenter.vue b/src/views/home/components/homeCenter.vue
index 331b385..7e07b58 100644
--- a/src/views/home/components/homeCenter.vue
+++ b/src/views/home/components/homeCenter.vue
@@ -23,7 +23,7 @@
       :titleP="title"
       :legendList="legendList"
       :height="'80%'"
-      :width="'92rem'"
+      :width="'78rem'"
     />
     <line-chart
       v-else-if="title === '购货退货单'"
@@ -32,7 +32,7 @@
       :titleP="title"
       :legendList="legendList"
       :height="'80%'"
-      :width="'92rem'"
+      :width="'78rem'"
     />
     <line-chart
       v-else-if="title === '销货出库单'"
@@ -41,7 +41,7 @@
       :titleP="title"
       :legendList="legendList"
       :height="'80%'"
-      :width="'92rem'"
+      :width="'78rem'"
     />
     <line-chart
       v-else-if="title === '销货退货单'"
@@ -50,7 +50,7 @@
       :titleP="title"
       :legendList="legendList"
       :height="'80%'"
-      :width="'92rem'"
+      :width="'78rem'"
     />
     <line-chart
       v-else-if="title === '收款单'"
@@ -59,7 +59,7 @@
       :titleP="title"
       :legendList="legendList"
       :height="'80%'"
-      :width="'92rem'"
+      :width="'78rem'"
     />
     <line-chart
       v-else-if="title === '付款单'"
@@ -68,25 +68,25 @@
       :titleP="title"
       :legendList="legendList"
       :height="'80%'"
-      :width="'92rem'"
+      :width="'78rem'"
     />
-    <line-chart
+    <pie
       v-else-if="title === '库存数据'"
-      :categories="categories"
-      :seriesData="seriesData"
       :titleP="title"
-      :legendList="legendList"
-      :height="'80%'"
-      :width="'92rem'"
+      :dataP="data"
+      :height="'15rem'"
+      :width="'40rem'"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import lineChart from '@/components/echarts/line.vue'
+import pie from '@/components/echarts/pie.vue'
 import { ref } from 'vue'
 
-const title = ref('销货出库单')
+const title = ref('采购入库单')
+// 折线图
 const categories = ref([
   '一月',
   '二月',
@@ -109,10 +109,17 @@ const seriesData = ref([
     type: 'line'
   }
 ])
+// 饼状图
+const data = ref([
+  { value: 50, name: '上午' },
+  { value: 50, name: '下午' },
+  { value: 100, name: '晚上' },
+  { value: 200, name: '睡觉' }
+])
 const circleClassList = ref([
   {
     color: '#5e5e5e',
-    judge: false
+    judge: true
   },
   {
     color: '#5e5e5e',
diff --git a/src/views/home/components/homeFooter.vue b/src/views/home/components/homeFooter.vue
index 52aa888..5740f1b 100644
--- a/src/views/home/components/homeFooter.vue
+++ b/src/views/home/components/homeFooter.vue
@@ -1,16 +1,38 @@
 <template>
   <div class="centerC">
     <div class="center-pie">
-      <pie :titleP="title" :dataP="data" :height="'15rem'" :width="'40rem'" />
+      <div class="title_class">
+        <span>资产数据</span>
+      </div>
+      <t-divider />
+      <div class="content">
+        <div class="allMoney">
+          <span>{{ '总资产' }}</span>
+          <span style="font-size: 20px; font-weight: 700; color: #606266">{{
+            '6224972.1353'
+          }}</span>
+        </div>
+        <div v-for="(item, index) in MoneyList" :key="index">
+          <div class="portionMoney">
+            <div :style="{ background: item.color }"></div>
+            <span style="margin: 0 3rem 0 0.5rem">{{ item.name }}</span>
+            <span>{{ item.money }}</span>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="center-bar">
+      <div class="title_class">
+        <span>资金数据</span>
+      </div>
+      <t-divider />
       <bar
         :categories="categories"
         :seriesData="seriesData"
         :title="titlebar"
         :legendList="legendList"
-        :height="'100%'"
-        :width="'52rem'"
+        :height="'80%'"
+        :width="'57rem'"
       />
     </div>
   </div>
@@ -18,18 +40,34 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import pie from '@/components/echarts/pie.vue'
+
 import bar from '@/components/echarts/bar.vue'
 
-const title = ref('一天的开心程度')
-const titlebar = ref('销售额')
-const data = ref([
-  { value: 50, name: '上午' },
-  { value: 50, name: '下午' },
-  { value: 100, name: '晚上' },
-  { value: 200, name: '睡觉' }
+const MoneyList = ref([
+  {
+    color: '#2196f3',
+    name: '资金余额',
+    money: '-2351917.2039'
+  },
+  {
+    color: '#4caf50',
+    name: '库存成本',
+    money: '8333528.3592'
+  },
+  {
+    color: '#f44336',
+    name: '应收欠款',
+    money: '183346.98'
+  },
+  {
+    color: '#ff9800',
+    name: '应付欠款',
+    money: '-60014'
+  }
 ])
 
+const titlebar = ref('资金')
+
 const categories = ref([
   '一月',
   '二月',
@@ -44,22 +82,12 @@ const categories = ref([
   '十一月',
   '十二月'
 ])
-const legendList = ['类别A', '类别B', '类别C']
+const legendList = ['类别A']
 const seriesData = ref([
   {
     name: '类别A',
     type: 'bar',
-    data: [1000, 1200, 1400, 1500, 1600, 1800, 1700, 1900, 2000, 2200, 2300, 2500]
-  },
-  {
-    name: '类别B',
-    type: 'bar',
-    data: [200, 400, 1000, 500, 700, 800, 1000, 1100, 1150, 1200, 1300, 1400]
-  },
-  {
-    name: '类别C',
-    type: 'bar',
-    data: [800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900]
+    data: [-1000, 1200, 1400, 1500, 1600, 1800, 1700, 1900, 2000, 2200, 2300, 2500]
   }
 ])
 </script>
@@ -77,17 +105,47 @@ export default {
   display: flex;
   justify-content: space-between;
   .center-pie {
-    width: 49%;
+    width: 30%;
     height: 100%;
     background-color: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
   }
   .center-bar {
-    width: 49%;
+    width: 68%;
     height: 100%;
     background-color: #fff;
   }
 }
+.title_class {
+  padding: 0 1rem;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+}
+
+.content {
+  width: 100%;
+  height: 80%;
+  padding: 0 1rem;
+  .allMoney {
+    height: 25%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  .portionMoney {
+    width: 100%;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    div {
+      width: 0.2rem;
+      height: 2rem;
+      background-color: aqua;
+    }
+  }
+}
+
+:deep(.t-divider) {
+  margin: 0 0 1rem 0;
+}
 </style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 128fa34..0bb4742 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -12,7 +12,7 @@
           <home-footer />
         </t-content>
       </t-content>
-      <t-aside class="contentInfo">Aside</t-aside>
+      <t-aside class="contentInfo"></t-aside>
     </t-layout>
   </div>
 </template>