From 99db358c668cad933f5c5345469ef5b892aeea0a Mon Sep 17 00:00:00 2001
From: ycy <2861518472@qq.com>
Date: Mon, 22 Apr 2024 17:15:00 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E9=A6=96=E9=A1=B5=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/echarts/bar.vue           |  95 +++++++++++
 src/components/echarts/line.vue          | 133 +++++++++++++++
 src/components/echarts/pie.vue           |  88 ++++++++++
 src/views/home/components/homeCenter.vue | 200 +++++++++++++++++++++++
 src/views/home/components/homeFooter.vue |  93 +++++++++++
 src/views/home/components/homeHeader.vue |  94 +++++++++++
 src/views/home/index.vue                 |  57 ++++++-
 7 files changed, 757 insertions(+), 3 deletions(-)
 create mode 100644 src/components/echarts/bar.vue
 create mode 100644 src/components/echarts/line.vue
 create mode 100644 src/components/echarts/pie.vue
 create mode 100644 src/views/home/components/homeCenter.vue
 create mode 100644 src/views/home/components/homeFooter.vue
 create mode 100644 src/views/home/components/homeHeader.vue

diff --git a/src/components/echarts/bar.vue b/src/components/echarts/bar.vue
new file mode 100644
index 0000000..a266a94
--- /dev/null
+++ b/src/components/echarts/bar.vue
@@ -0,0 +1,95 @@
+<template>
+  <div style="height: 100%">
+    <div ref="barChartRef" :style="{ width: width, height: height }"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts'
+import { onMounted, ref } from 'vue'
+
+// 定义图表容器引用
+const barChartRef = ref(null)
+
+const { categories, seriesData, title, legendList } = defineProps({
+  // 横坐标
+  categories: {
+    type: Array,
+    required: true
+  },
+  // 纵坐标
+  seriesData: {
+    type: Array,
+    required: true
+  },
+  // 标题
+  title: {
+    type: String,
+    required: true
+  },
+  // 图例
+  legendList: {
+    type: Array,
+    required: true
+  },
+  // 宽度
+  width: {
+    type: String,
+    default: '100%'
+  },
+  // 高度
+  height: {
+    type: String,
+    default: '100%'
+  }
+})
+
+// 配置图表数据和选项
+const option = {
+  title: {
+    text: title,
+    left: 'center',
+    top: '10'
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  legend: {
+    data: legendList, // 根据实际需求替换为对应系列名称
+    bottom: '10'
+  },
+  xAxis: {
+    type: 'category',
+    data: categories
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: seriesData
+}
+
+// 在组件挂载后初始化ECharts实例并设置选项
+onMounted(() => {
+  const barChartContainer = barChartRef.value
+  if (barChartContainer) {
+    const myChart = echarts.init(barChartContainer)
+    myChart.setOption(option)
+
+    // 添加窗口resize事件监听，自动调整图表大小
+    window.addEventListener('resize', () => {
+      myChart.resize()
+    })
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'BarChart'
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/components/echarts/line.vue b/src/components/echarts/line.vue
new file mode 100644
index 0000000..22e2be9
--- /dev/null
+++ b/src/components/echarts/line.vue
@@ -0,0 +1,133 @@
+<template>
+  <div style="height: 100%">
+    <div ref="lineChartRef" :style="{ width: width, height: height }"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts'
+import { onMounted, ref } from 'vue'
+
+// 定义图表容器引用
+const lineChartRef = ref(null)
+
+const { categories, seriesData, titleP, legendList } = defineProps({
+  // 横坐标
+  categories: {
+    type: Array,
+    required: true
+  },
+  // 纵坐标
+  seriesData: {
+    type: Array,
+    required: true
+  },
+  titleP: {
+    type: String,
+    default: '示例折线图'
+  },
+  // 图例
+  legendList: {
+    type: Array,
+    required: true
+  },
+  width: {
+    type: String,
+    default: '100%'
+  },
+  height: {
+    type: String,
+    default: '100%'
+  }
+})
+
+// 配置图表数据和选项
+const option = {
+  title: {
+    text: titleP,
+    left: 'center',
+    top: '2'
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    data: legendList,
+    bottom: 0
+  },
+  grid: {
+    left: '3%',
+    right: '3%',
+    bottom: '9%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: categories,
+    axisTick: {
+      alignWithLabel: true
+    }
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      lineStyle: {
+        type: 'dashed'
+      }
+    }
+  },
+  series: seriesData.map((serie: any) => ({
+    ...serie,
+    lineStyle: {
+      width: 2
+    },
+    smooth: true,
+    itemStyle: {
+      color: '#57c1ff'
+    },
+    areaStyle: {
+      // 添加这一行
+      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+          offset: 0,
+          color: '#88d1ff'
+        }, // 填充色开始颜色（可自定义）
+        {
+          offset: 1,
+          color: '#1a91ff'
+        } // 填充色结束颜色（可自定义）
+      ])
+      // opacity: 0 // 可根据需要调整透明度
+    }
+  }))
+}
+
+// 在组件挂载后初始化ECharts实例并设置选项
+onMounted(() => {
+  const lineChartContainer = lineChartRef.value
+  if (lineChartContainer) {
+    const myChart = echarts.init(lineChartContainer)
+    myChart.setOption(option)
+
+    // 添加窗口resize事件监听，自动调整图表大小
+    window.addEventListener('resize', () => {
+      myChart.resize()
+    })
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LineChart'
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/components/echarts/pie.vue b/src/components/echarts/pie.vue
new file mode 100644
index 0000000..d1bd0d4
--- /dev/null
+++ b/src/components/echarts/pie.vue
@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div ref="pieChartRef" :style="{ width: width, height: height }"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts'
+import { onMounted, ref } from 'vue'
+
+// 定义图表容器引用
+const pieChartRef = ref(null)
+
+const { titleP, dataP } = defineProps({
+  // 图表数据
+  dataP: {
+    type: Array,
+    default: () => []
+  },
+  titleP: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: String,
+    default: '100%'
+  },
+  height: {
+    type: String,
+    default: '100%'
+  }
+})
+
+// 配置图表数据和选项
+const option = {
+  title: {
+    text: titleP,
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c} ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    left: '0',
+    top: '50'
+  },
+  series: [
+    {
+      name: '访问来源',
+      type: 'pie',
+      radius: '50%',
+      left: '50',
+      data: dataP,
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
+    }
+  ]
+}
+
+// 在组件挂载后初始化ECharts实例并设置选项
+onMounted(() => {
+  const pieChartContainer = pieChartRef.value
+  if (pieChartContainer) {
+    const myChart = echarts.init(pieChartContainer)
+    myChart.setOption(option)
+
+    // 添加窗口resize事件监听，自动调整图表大小
+    window.addEventListener('resize', () => {
+      myChart.resize()
+    })
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'pieChart'
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/home/components/homeCenter.vue b/src/views/home/components/homeCenter.vue
new file mode 100644
index 0000000..331b385
--- /dev/null
+++ b/src/views/home/components/homeCenter.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="linebox">
+    <div class="title_class">
+      <span>数据概览</span>
+      <div class="circle_layout">
+        <div
+          class="circle"
+          v-for="(item, index) in circleClassList"
+          :style="{
+            background: `${item.judge ? item.color : ''}`,
+            cursor: `${item.judge ? 'pointer' : ''}`
+          }"
+          :key="index"
+          @mouseover="circleClick(index)"
+        ></div>
+      </div>
+    </div>
+    <t-divider />
+    <line-chart
+      v-if="title === '采购入库单'"
+      :categories="categories"
+      :seriesData="seriesData"
+      :titleP="title"
+      :legendList="legendList"
+      :height="'80%'"
+      :width="'92rem'"
+    />
+    <line-chart
+      v-else-if="title === '购货退货单'"
+      :categories="categories"
+      :seriesData="seriesData"
+      :titleP="title"
+      :legendList="legendList"
+      :height="'80%'"
+      :width="'92rem'"
+    />
+    <line-chart
+      v-else-if="title === '销货出库单'"
+      :categories="categories"
+      :seriesData="seriesData"
+      :titleP="title"
+      :legendList="legendList"
+      :height="'80%'"
+      :width="'92rem'"
+    />
+    <line-chart
+      v-else-if="title === '销货退货单'"
+      :categories="categories"
+      :seriesData="seriesData"
+      :titleP="title"
+      :legendList="legendList"
+      :height="'80%'"
+      :width="'92rem'"
+    />
+    <line-chart
+      v-else-if="title === '收款单'"
+      :categories="categories"
+      :seriesData="seriesData"
+      :titleP="title"
+      :legendList="legendList"
+      :height="'80%'"
+      :width="'92rem'"
+    />
+    <line-chart
+      v-else-if="title === '付款单'"
+      :categories="categories"
+      :seriesData="seriesData"
+      :titleP="title"
+      :legendList="legendList"
+      :height="'80%'"
+      :width="'92rem'"
+    />
+    <line-chart
+      v-else-if="title === '库存数据'"
+      :categories="categories"
+      :seriesData="seriesData"
+      :titleP="title"
+      :legendList="legendList"
+      :height="'80%'"
+      :width="'92rem'"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import lineChart from '@/components/echarts/line.vue'
+import { ref } from 'vue'
+
+const title = ref('销货出库单')
+const categories = ref([
+  '一月',
+  '二月',
+  '三月',
+  '四月',
+  '五月',
+  '六月',
+  '七月',
+  '八月',
+  '九月',
+  '十月',
+  '十一月',
+  '十二月'
+])
+const legendList = ref(['销货出库单'])
+const seriesData = ref([
+  {
+    name: '销货出库单',
+    data: [10, 4200, 1800, 2800, 110, 3200, 100, 2000, 1500, 2000, 7500, 3000],
+    type: 'line'
+  }
+])
+const circleClassList = ref([
+  {
+    color: '#5e5e5e',
+    judge: false
+  },
+  {
+    color: '#5e5e5e',
+    judge: false
+  },
+  {
+    color: '#5e5e5e',
+    judge: false
+  },
+  {
+    color: '#5e5e5e',
+    judge: false
+  },
+  {
+    color: '#5e5e5e',
+    judge: false
+  },
+  {
+    color: '#5e5e5e',
+    judge: false
+  },
+  {
+    color: '#5e5e5e',
+    judge: false
+  }
+])
+const circleClick = async (index: number) => {
+  await circleClassList.value.forEach((item, i) => {
+    if (i === index) {
+      item.judge = true
+    } else {
+      item.judge = false
+    }
+  })
+  if (index === 0) {
+    title.value = '采购入库单'
+  } else if (index === 1) {
+    title.value = '购货退货单'
+  } else if (index === 2) {
+    title.value = '销货出库单'
+  } else if (index === 3) {
+    title.value = '销货退货单'
+  } else if (index === 4) {
+    title.value = '收款单'
+  } else if (index === 5) {
+    title.value = '付款单'
+  } else if (index === 6) {
+    title.value = '库存数据'
+  }
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'homeCenter'
+}
+</script>
+
+<style lang="less" scoped>
+.linebox {
+  width: 100%;
+  height: 100%;
+}
+.title_class {
+  padding: 0 1rem;
+  height: 3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .circle_layout {
+    width: 7rem;
+    display: flex;
+    justify-content: space-around;
+    .circle {
+      width: 0.6rem;
+      height: 0.6rem;
+      background-color: #b2b2b2;
+      border-radius: 50%;
+    }
+  }
+}
+:deep(.t-divider) {
+  margin: 0 0 1rem 0;
+}
+</style>
diff --git a/src/views/home/components/homeFooter.vue b/src/views/home/components/homeFooter.vue
new file mode 100644
index 0000000..52aa888
--- /dev/null
+++ b/src/views/home/components/homeFooter.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="centerC">
+    <div class="center-pie">
+      <pie :titleP="title" :dataP="data" :height="'15rem'" :width="'40rem'" />
+    </div>
+    <div class="center-bar">
+      <bar
+        :categories="categories"
+        :seriesData="seriesData"
+        :title="titlebar"
+        :legendList="legendList"
+        :height="'100%'"
+        :width="'52rem'"
+      />
+    </div>
+  </div>
+</template>
+
+<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 categories = ref([
+  '一月',
+  '二月',
+  '三月',
+  '四月',
+  '五月',
+  '六月',
+  '七月',
+  '八月',
+  '九月',
+  '十月',
+  '十一月',
+  '十二月'
+])
+const legendList = ['类别A', '类别B', '类别C']
+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]
+  }
+])
+</script>
+
+<script lang="ts">
+export default {
+  name: 'homeFooter'
+}
+</script>
+
+<style lang="less" scoped>
+.centerC {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  .center-pie {
+    width: 49%;
+    height: 100%;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .center-bar {
+    width: 49%;
+    height: 100%;
+    background-color: #fff;
+  }
+}
+</style>
diff --git a/src/views/home/components/homeHeader.vue b/src/views/home/components/homeHeader.vue
new file mode 100644
index 0000000..e77a155
--- /dev/null
+++ b/src/views/home/components/homeHeader.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="headerC">
+    <div class="header_box" v-for="(item, index) in homeTitle" :key="index">
+      <div class="header_box">
+        <div class="content">
+          <div class="title">{{ item.title }}</div>
+          <div class="num">{{ item.num }}</div>
+        </div>
+        <div class="header_icon">
+          <t-icon :name="item.icon" class="icon" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const homeTitle = ref([
+  {
+    title: '月购贷额',
+    num: '362,134.39',
+    icon: 'cart-add'
+  },
+  {
+    title: '月销贷额',
+    num: '118,505.42',
+    icon: 'cart'
+  },
+  {
+    title: '月资金收入',
+    num: '200,182.74',
+    icon: 'money'
+  },
+  {
+    title: '月资金支出',
+    num: '400,099.91',
+    icon: 'logo-github'
+  }
+])
+</script>
+
+<script lang="ts">
+export default {
+  name: 'homeHeader'
+}
+</script>
+
+<style lang="less" scoped>
+.headerC {
+  height: 100%;
+  background-color: #fff;
+  padding: 0 1rem;
+  justify-content: space-between;
+  display: flex;
+}
+.header_box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.header_icon {
+  width: 30%;
+  height: 100%;
+  display: flex;
+  margin-right: 1.3rem;
+  margin-top: 0.6rem;
+  align-items: center;
+  justify-content: flex-end;
+  .icon {
+    width: 2rem;
+    height: 2rem;
+    color: #366ef4;
+  }
+}
+.content {
+  width: 70%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  .title {
+    font-size: 0.7rem;
+    color: #74757c;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+  }
+  .num {
+    font-size: 1.2rem;
+    font-weight: 600;
+  }
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 5a42fb3..128fa34 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,8 +1,27 @@
 <template>
-  <div>1111111111</div>
+  <div class="back-color">
+    <t-layout class="global_schema">
+      <t-content class="echarts">
+        <t-header class="header">
+          <home-header />
+        </t-header>
+        <t-content class="content">
+          <home-center />
+        </t-content>
+        <t-content class="footer">
+          <home-footer />
+        </t-content>
+      </t-content>
+      <t-aside class="contentInfo">Aside</t-aside>
+    </t-layout>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import homeHeader from './components/homeHeader.vue'
+import homeCenter from './components/homeCenter.vue'
+import homeFooter from './components/homeFooter.vue'
+</script>
 
 <script lang="ts">
 export default {
@@ -10,4 +29,36 @@ export default {
 }
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less">
+.global_schema {
+  width: 100%;
+  height: 100%;
+  .echarts {
+    width: 80%;
+    height: 100%;
+    background-color: #f5f7fb;
+    padding: 0 2rem 0 0;
+    .header {
+      height: 5rem;
+      width: 100%;
+      margin-bottom: 1rem;
+      background-color: #f5f7fb;
+    }
+    .content {
+      height: 25rem;
+      width: 100%;
+      background-color: #fff;
+      margin-bottom: 1rem;
+    }
+    .footer {
+      height: 20rem;
+      width: 100%;
+      margin-bottom: 1rem;
+    }
+  }
+  .contentInfo {
+    width: 20%;
+    height: 100%;
+  }
+}
+</style>