feat: 3d柱状图和饼图echarts开发

public/platform-config.json

@@ -15,7 +15,7 @@
   "HideFooter": false,
   "Stretch": false,
   "SidebarStatus": true,
-  "EpThemeColor": "#409EFF",
+  "EpThemeColor": "#5070f2",
   "ShowLogo": true,
   "ShowModel": "smart",
   "MenuArrowIconNoTransition": false,

src/assets/home/excel_icon.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_389_519)">
+<path d="M3.19998 6.11671e-06C3.04281 -0.00050621 2.8872 0.0311704 2.74273 0.0930842C2.59826 0.154998 2.46801 0.245838 2.35998 0.360006C2.14 0.600006 2.00001 0.900006 2.00001 1.20001V22.8C1.99949 22.9572 2.03117 23.1128 2.09308 23.2572C2.155 23.4017 2.24584 23.532 2.36001 23.64C2.46921 23.7526 2.5997 23.8425 2.74389 23.9043C2.88809 23.9661 3.04313 23.9986 3.20001 24H20.8C20.9571 24.0005 21.1128 23.9688 21.2572 23.9069C21.4017 23.845 21.5319 23.7542 21.64 23.64C21.7526 23.5308 21.8424 23.4003 21.9042 23.2561C21.966 23.1119 21.9986 22.9569 22 22.8V6.80002L15.2 6.11671e-06H3.19998Z" fill="#00B632"/>
+<path d="M22.0002 6.79999H16.4002C16.0844 6.7923 15.7836 6.6634 15.5602 6.44001C15.3368 6.21661 15.2079 5.91583 15.2002 5.59999V0L22.0002 6.79999Z" fill="#7FDA98"/>
+<path d="M10.5119 13.8316L6.09546 7.80469H9.14805L12.0375 12.1188L15.0595 7.80469H18.0148L13.4987 13.8316L18.2402 20.2439H15.1571L11.9718 15.6725L8.7945 20.2734H5.77148L10.5119 13.8316Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_389_519">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/home/export_icon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.59974 1.99999C7.59974 2.33136 7.33111 2.59999 6.99974 2.59999C6.11562 2.59999 4.9273 2.89854 3.97064 3.70803C3.03506 4.49967 2.26641 5.82535 2.26641 7.99999C2.26641 10.1746 3.03506 11.5003 3.97064 12.292C4.9273 13.1014 6.11562 13.4 6.99974 13.4C7.33111 13.4 7.59974 13.6686 7.59974 14C7.59974 14.3314 7.33111 14.6 6.99974 14.6C5.88386 14.6 4.40551 14.2319 3.19551 13.208C1.96442 12.1663 1.06641 10.492 1.06641 7.99999C1.06641 5.50797 1.96442 3.83365 3.19551 2.79196C4.40551 1.76811 5.88386 1.39999 6.99974 1.39999C7.33111 1.39999 7.59974 1.66862 7.59974 1.99999Z" fill="#5070F2"/>
+<path d="M14.8995 8.00259C14.8995 8.33396 14.6309 8.60259 14.2995 8.60259H4.99971C4.66834 8.60259 4.39971 8.33396 4.39971 8.00259C4.39971 7.67122 4.66834 7.40259 4.99971 7.40259H14.2995C14.6309 7.40259 14.8995 7.67122 14.8995 8.00259Z" fill="#5070F2"/>
+<path d="M14.7573 7.57573C14.9917 7.81004 14.9917 8.18994 14.7573 8.42426L10.7573 12.4243C10.523 12.6586 10.1431 12.6586 9.90881 12.4243C9.67449 12.1899 9.67449 11.81 9.90881 11.5757L13.4845 7.99999L9.90881 4.42426C9.67449 4.18994 9.67449 3.81004 9.90881 3.57573C10.1431 3.34142 10.523 3.34142 10.7573 3.57573L14.7573 7.57573Z" fill="#5070F2"/>
+</svg>

src/layout/components/lay-content/index.vue

@@ -148,7 +148,7 @@ const transitionMain = defineComponent({
                   />
                 </transitionMain>
               </div>
-              <LayFooter v-if="!hideFooter" />
+              <!-- <LayFooter v-if="!hideFooter" /> -->
             </el-scrollbar>
             <div v-else class="grow">
               <transitionMain :route="route">

src/main.ts

@@ -3,7 +3,7 @@ import router from "./router";
 import { setupStore } from "@/store";
 import { getPlatformConfig } from "./config";
 import { MotionPlugin } from "@vueuse/motion";
-// import { useEcharts } from "@/plugins/echarts";
+import { useEcharts } from "@/plugins/echarts";
 import { createApp, type Directive } from "vue";
 import { useElementPlus } from "@/plugins/elementPlus";
 import { injectResponsiveStorage } from "@/utils/responsive";
@@ -55,7 +55,7 @@ getPlatformConfig(app).then(async config => {
   app.use(router);
   await router.isReady();
   injectResponsiveStorage(app, config);
-  app.use(MotionPlugin).use(useElementPlus).use(Table);
+  app.use(MotionPlugin).use(useElementPlus).use(Table).use(useEcharts);
   // .use(PureDescriptions)
   // .use(useEcharts);
   app.mount("#app");

src/plugins/echarts.ts

@@ -1,6 +1,6 @@
 import type { App } from "vue";
 import * as echarts from "echarts/core";
-import { PieChart, BarChart, LineChart } from "echarts/charts";
+import { PieChart, BarChart, LineChart, CustomChart } from "echarts/charts";
 import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
 import {
   GridComponent,
@@ -30,7 +30,8 @@ use([
   ToolboxComponent,
   TooltipComponent,
   DataZoomComponent,
-  VisualMapComponent
+  VisualMapComponent,
+  CustomChart
 ]);
 
 /**

src/views/welcome/components/AccountChartBar.vue

@@ -0,0 +1,505 @@
+<script setup lang="ts">
+import { useECharts } from "@pureadmin/utils";
+import { type PropType, ref, computed, watch, nextTick } from "vue";
+import * as echarts from "echarts/core";
+
+const props = defineProps({
+  requireData: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  },
+  questionData: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  }
+});
+
+const accountChartBar = ref();
+const { setOptions } = useECharts(accountChartBar);
+
+// 定义 random 函数
+const random = (min: number, max: number): number => {
+  return Math.floor(Math.random() * (max - min)) + min;
+};
+
+// 注册形状绘制函数
+const registerShapeFun = () => {
+  const offsetX = 10;
+  const offsetY = 5;
+
+  // 绘制左侧面
+  const CubeLeft = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0
+    },
+    buildPath: (
+      ctx: CanvasRenderingContext2D,
+      shape: { xAxisPoint: number[]; x: number; y: number }
+    ) => {
+      const xAxisPoint = shape.xAxisPoint;
+      const c0 = [shape.x, shape.y];
+      const c1 = [shape.x - offsetX, shape.y - offsetY];
+      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+      const c3 = [xAxisPoint[0], xAxisPoint[1]];
+      ctx.moveTo(c0[0], c0[1]);
+      ctx.lineTo(c1[0], c1[1]);
+      ctx.lineTo(c2[0], c2[1]);
+      ctx.lineTo(c3[0], c3[1]);
+      ctx.closePath();
+    }
+  });
+
+  // 绘制右侧面
+  const CubeRight = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0
+    },
+    buildPath: (
+      ctx: CanvasRenderingContext2D,
+      shape: { xAxisPoint: number[]; x: number; y: number }
+    ) => {
+      const xAxisPoint = shape.xAxisPoint;
+      const c1 = [shape.x, shape.y];
+      const c2 = [xAxisPoint[0], xAxisPoint[1]];
+      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+      const c4 = [shape.x + offsetX, shape.y - offsetY];
+      ctx.moveTo(c1[0], c1[1]);
+      ctx.lineTo(c2[0], c2[1]);
+      ctx.lineTo(c3[0], c3[1]);
+      ctx.lineTo(c4[0], c4[1]);
+      ctx.closePath();
+    }
+  });
+
+  // 绘制顶面
+  const CubeTop = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0
+    },
+    buildPath: (
+      ctx: CanvasRenderingContext2D,
+      shape: { x: number; y: number }
+    ) => {
+      const c1 = [shape.x, shape.y];
+      const c2 = [shape.x + offsetX, shape.y - offsetY];
+      const c3 = [shape.x, shape.y - offsetX];
+      const c4 = [shape.x - offsetX, shape.y - offsetY];
+      ctx.moveTo(c1[0], c1[1]);
+      ctx.lineTo(c2[0], c2[1]);
+      ctx.lineTo(c3[0], c3[1]);
+      ctx.lineTo(c4[0], c4[1]);
+      ctx.closePath();
+    }
+  });
+
+  return [CubeLeft, CubeRight, CubeTop];
+};
+
+// 生成形状函数
+const [CubeLeft, CubeRight, CubeTop] = registerShapeFun();
+// 注册三个面图形
+echarts.graphic.registerShape("CubeLeft", CubeLeft);
+echarts.graphic.registerShape("CubeRight", CubeRight);
+echarts.graphic.registerShape("CubeTop", CubeTop);
+
+// 数据
+const colorArr = [
+  ["#3B9FFE", "#5070F2", "#5070F2"],
+  ["#FFAC06", "#FFDA8D", "#FFB114"]
+];
+
+const seriesArr: number[][] = [];
+const xAxisData: string[] = [];
+const seriesData: any[] = [];
+
+// 生成数据
+for (let d = 0; d < 6; d++) {
+  xAxisData.push("2023年" + d + 1 + "月");
+}
+
+for (let i = 0; i < 2; i++) {
+  seriesArr[i] = [];
+  for (let x = 0; x < 6; x++) {
+    seriesArr[i].push(random(10, 80));
+  }
+}
+
+for (let index = 0; index < 2; index++) {
+  seriesData.push({
+    type: "custom",
+    name: index === 0 ? "出账金额" : "进账金额",
+    renderItem: (params: any, api: any) => {
+      const location = api.coord([api.value(0), api.value(1)]);
+      return {
+        type: "group",
+        x: index === 1 ? 18 : -12,
+        label: {
+          show: true
+        },
+        children: [
+          {
+            type: "CubeLeft",
+            shape: {
+              api,
+              xValue: api.value(0),
+              yValue: api.value(1),
+              x: location[0],
+              y: location[1],
+              xAxisPoint: api.coord([api.value(0), 0])
+            },
+            style: {
+              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: colorArr[index][0]
+                },
+                {
+                  offset: 1,
+                  color: colorArr[index][1]
+                }
+              ])
+            }
+          },
+          {
+            type: "CubeRight",
+            shape: {
+              api,
+              xValue: api.value(0),
+              yValue: api.value(1),
+              x: location[0],
+              y: location[1],
+              xAxisPoint: api.coord([api.value(0), 0])
+            },
+            style: {
+              fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: colorArr[index][0]
+                },
+                {
+                  offset: 1,
+                  color: colorArr[index][1]
+                }
+              ])
+            }
+          },
+          {
+            type: "CubeTop",
+            shape: {
+              api,
+              xValue: api.value(0),
+              yValue: api.value(1),
+              x: location[0],
+              y: location[1],
+              xAxisPoint: api.coord([api.value(0), 0])
+            },
+            style: {
+              fill: colorArr[index][2]
+            }
+          }
+        ]
+      };
+    },
+    data: seriesArr[index]
+  });
+}
+const yData1 = [100, 70, 20, 90, 50, 180];
+const yData2 = [10, 50, 20, 30, 50, 100];
+
+watch(
+  () => props,
+  async () => {
+    await nextTick(); // 确保DOM更新完成后再执行
+    setOptions({
+      // container: ".bar-card",
+      // backgroundColor: "rgba(154,174,255,0.1)",
+      tooltip: {
+        // show: false
+        trigger: "axis",
+        textStyle: {
+          fontSize: 20 // 字体大小
+        },
+        axisPointer: {
+          type: "shadow"
+        }
+      },
+      toolbox: {
+        right: 15,
+        feature: {
+          // dataZoom: { yAxisIndex: "none" }, // 数据区域缩放
+          // restore: { show: true }, // 重置
+          myFull: {
+            // 全屏
+            show: false,
+            title: "全屏",
+            icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
+            onclick: e => {
+              // 全屏查看
+              if (accountChartBar.value.requestFullScreen) {
+                // HTML W3C 提议
+                accountChartBar.value.requestFullScreen();
+              } else if (accountChartBar.value.msRequestFullscreen) {
+                // IE11
+                accountChartBar.value.msRequestFullScreen();
+              } else if (accountChartBar.value.webkitRequestFullScreen) {
+                // Webkit
+                accountChartBar.value.webkitRequestFullScreen();
+              } else if (accountChartBar.value.mozRequestFullScreen) {
+                // Firefox
+                accountChartBar.value.mozRequestFullScreen();
+              }
+              // 退出全屏
+              if (accountChartBar.value.requestFullScreen) {
+                document.exitFullscreen();
+              } else if (accountChartBar.value.msRequestFullScreen) {
+                document.exitFullscreen();
+              } else if (accountChartBar.value.webkitRequestFullScreen) {
+                document.webkitCancelFullScreen();
+              } else if (accountChartBar.value.mozRequestFullScreen) {
+                document.mozCancelFullScreen();
+              }
+            }
+          },
+          saveAsImage: {
+            show: false,
+            title: "保存"
+          } // 导出图片
+        }
+      },
+      color: ["#5070F2", "#FFAC06", "#00B58C", "#082FF8"],
+      legend: {
+        show: true,
+        // right: 30,
+        bottom: 6,
+        itemGap: 30,
+        itemWidth: 12,
+        itemHeight: 8,
+        data: ["出账金额", "进账金额", "出账笔数", "进账笔数"],
+        textStyle: {
+          fontSize: 12,
+          color: "#666"
+        }
+      },
+      grid: {
+        top: 60,
+        left: 20,
+        right: 20,
+        bottom: 40,
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: "category",
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(80,112,242,1)"
+            }
+          },
+          boundaryGap: true,
+          axisTick: {
+            show: false
+          },
+          splitArea: {
+            show: false
+          },
+          axisLabel: {
+            inside: false,
+            interval: 0,
+            rotate: 0,
+            // textStyle: {
+            color: "#8C8C8C",
+            fontWeight: 400,
+            fontSize: 12,
+            // },
+            margin: 15
+          },
+          data: xAxisData
+        }
+      ],
+      yAxis: [
+        {
+          type: "value",
+          name: `{a|} {b|出入账趋势}`,
+          nameTextStyle: {
+            color: "#333",
+            // align: "center",
+            padding: [15, 0, 0, 20],
+            // fontSize: 16,
+            // fontWeight: "bold",
+            verticalAlign: "middle",
+            rich: {
+              a: {
+                backgroundColor: "#5070F2",
+                width: 2,
+                height: 17,
+                verticalAlign: "middle"
+              },
+              b: {
+                padding: [2, 0, 0, 0],
+                fontSize: 16,
+                fontWeight: "bold"
+              }
+            }
+          },
+          nameGap: 40,
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "#333"
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "rgba(80,112,242,0.3)"
+            }
+          },
+          axisLabel: {
+            // textStyle: {
+            color: "#8C8C8C",
+            fontWeight: 400,
+            fontSize: 12,
+            // },
+            formatter: "{value}",
+            margin: 15
+          }
+        },
+        {
+          type: "value",
+          // name: "%",
+          nameGap: 30,
+          position: "right",
+          nameTextStyle: {
+            color: "#ffffff",
+            fontWeight: 400,
+            fontSize: 16
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              color: "rgba(239, 247, 253, .1)"
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(239, 247, 253, .1)"
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            fontSize: 12,
+            color: "#8C8C8C"
+          },
+          min: 0,
+          max: Math.ceil(Math.max.apply(null, yData1) / 5) * 5,
+          interval: Math.ceil(Math.max.apply(null, yData1) / 4)
+        }
+      ],
+      series: [
+        ...seriesData,
+        {
+          type: "bar",
+          name: "出账金额",
+          itemStyle: {
+            color: "transparent"
+          },
+          tooltip: {
+            show: false
+          },
+          data: seriesArr[0]
+        },
+        {
+          type: "bar",
+          itemStyle: {
+            color: "transparent"
+          },
+          tooltip: {
+            show: false
+          },
+          data: seriesArr[1]
+        },
+        {
+          name: "出账笔数",
+          type: "line",
+          showSymbol: true,
+          // smooth: true,
+          symbol: "circle",
+          symbolSize: 8,
+          yAxisIndex: 1,
+          itemStyle: {
+            color: "#00B58C"
+          },
+          lineStyle: {
+            width: 2
+          },
+          // areaStyle: {
+          //   normal: {
+          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //       {
+          //         offset: 0,
+          //         color: "rgba(67, 239, 255, .3)"
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: "rgba(1, 17, 49, .3)"
+          //       }
+          //     ])
+          //   }
+          // },
+          data: yData1
+        },
+        {
+          name: "进账笔数",
+          type: "line",
+          showSymbol: true,
+          // smooth: true,
+          symbol: "circle",
+          symbolSize: 8,
+          yAxisIndex: 1,
+          itemStyle: {
+            color: "#082FF8"
+          },
+          lineStyle: {
+            width: 2
+          },
+          // areaStyle: {
+          //   normal: {
+          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //       {
+          //         offset: 0,
+          //         color: "rgba(67, 239, 255, .3)"
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: "rgba(1, 17, 49, .3)"
+          //       }
+          //     ])
+          //   }
+          // },
+          data: yData2
+        }
+      ]
+    });
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+</script>
+
+<template>
+  <div ref="accountChartBar" style="width: 100%; height: 100%" />
+</template>

src/views/welcome/components/AccountChartPie.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { useECharts } from "@pureadmin/utils";
+import { type PropType, ref, computed, watch, nextTick } from "vue";
+import * as echarts from "echarts/core";
+
+const props = defineProps({
+  requireData: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  },
+  questionData: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  }
+});
+
+const accountChartPie = ref();
+const { setOptions } = useECharts(accountChartPie);
+
+// 定义 random 函数
+const random = (min: number, max: number): number => {
+  return Math.floor(Math.random() * (max - min)) + min;
+};
+const yData = [
+  { value: "36", name: "银联入账" },
+  { value: "48", name: "支付机构提现" },
+  { value: "31", name: "电子汇入" },
+  { value: "29", name: "消费" },
+  { value: "59", name: "转账存入" }
+];
+const yData2 = [10, 50, 20, 30, 50, 100];
+
+watch(
+  () => props,
+  async () => {
+    await nextTick(); // 确保DOM更新完成后再执行
+    setOptions({
+      // container: ".bar-card",
+      // backgroundColor: "rgba(154,174,255,0.1)",
+      tooltip: {
+        trigger: "item",
+        formatter: function (params) {
+          console.log(params);
+          return params.name + ":" + params.value + "元";
+        }
+      },
+      title: {
+        text: "{a|} {b|资金用途}",
+        left: 20,
+        top: 12,
+        textStyle: {
+          lineHeight: 24,
+          rich: {
+            a: {
+              backgroundColor: "#5070F2",
+              width: 2,
+              height: 17,
+              verticalAlign: "middle"
+            },
+            b: {
+              padding: [2, 0, 0, 0],
+              fontSize: 16,
+              color: "#333",
+              // color: "333",
+              fontWeight: "bold"
+            }
+          }
+        }
+      },
+      grid: {
+        top: 60,
+        left: 20,
+        right: 20,
+        bottom: 40,
+        containLabel: true
+      },
+      series: [
+        {
+          type: "pie",
+          radius: ["20%", "60%"],
+          center: ["50%", "50%"],
+          itemStyle: {
+            // borderRadius: 10,
+            // borderWidth: 2,
+            color: function (params) {
+              const colorList = [
+                {
+                  c1: "#FFCC4A",
+                  c2: "#FF7C09"
+                },
+                {
+                  c1: "#028FF5",
+                  c2: "#0032FF"
+                },
+                {
+                  c1: "#06EA7C",
+                  c2: "#04FFF2"
+                },
+                {
+                  c1: "#FF7D05",
+                  c2: "#FF0103"
+                },
+                {
+                  c1: "#D19EFF",
+                  c2: "#8500FF"
+                }
+              ];
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                {
+                  offset: 0,
+                  color: colorList[params.dataIndex].c1
+                },
+                {
+                  offset: 1,
+                  color: colorList[params.dataIndex].c2
+                }
+              ]);
+            }
+          },
+          label: {
+            lineHeight: 25,
+            formatter: function (params) {
+              console.log(params);
+              return (
+                "{title|" +
+                params.name +
+                "}\n" +
+                "{value|" +
+                params.value +
+                "元" +
+                "}"
+              );
+            },
+            rich: {
+              title: {
+                fontSize: 14,
+                fontFamily: "PingFang SC",
+                fontWeight: 500,
+                color: "#333"
+              },
+              value: {
+                fontSize: 14,
+                fontFamily: "PingFang SC",
+                fontWeight: 500,
+                color: "#333"
+              }
+            },
+            edgeDistance: 10
+          },
+          labelLine: {
+            show: true,
+            length2: 10,
+            length: 30
+          },
+          data: yData as any
+        }
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)"
+        }
+      }
+    });
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+</script>
+
+<template>
+  <div ref="accountChartPie" style="width: 100%; height: 100%" />
+</template>

src/views/welcome/components/index.ts

@@ -0,0 +1,2 @@
+export { default as AccountChartBar } from "./AccountChartBar.vue";
+export { default as AccountChartPie } from "./AccountChartPie.vue";

src/views/welcome/index.vue

@@ -1,9 +1,688 @@
 <script setup lang="ts">
+import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue";
+import type { UploadProps, UploadUserFile } from "element-plus";
+import { Search } from "@element-plus/icons-vue";
+import excelIcon from "@/assets/home/excel_icon.svg?component";
+import exportIcon from "@/assets/home/export_icon.svg?component";
+import emptyIcon from "@/assets/home/empty_icon.png";
+import { AccountChartBar, AccountChartPie } from "./components";
+
 defineOptions({
   name: "Welcome"
 });
+const textarea = ref("");
+const activeName = ref("1");
+const inputValue = ref("");
+const checkedValue = ref(false);
+const checkAll = ref(false);
+
+const format = percentage => (percentage === 100 ? "分析完成" : "数据分析中");
+const fileList = ref<UploadUserFile[]>([
+  {
+    name: "food.jpeg",
+    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
+  }
+]);
+
+const handleChange: UploadProps["onChange"] = (uploadFile, uploadFiles) => {
+  fileList.value = fileList.value.slice(-3);
+};
+const handleChangeCollapse = (val: string) => {
+  console.log(val);
+  activeName.value = val;
+};
+const handleCheckAllChange = (val: boolean) => {
+  console.log(val);
+};
+const barChartData = [
+  {
+    requireData: [2101, 5288, 4239, 4962, 6752, 5208, 7450],
+    questionData: [2216, 1148, 1255, 1788, 4821, 1973, 4379]
+  },
+  {
+    requireData: [2101, 3280, 4400, 4962, 5752, 6889, 7600],
+    questionData: [2116, 3148, 3255, 3788, 4821, 4970, 5390]
+  }
+];
+const pageNum = ref(3);
 </script>
 
 <template>
-  <h1>Pure-Admin-Thin（非国际化版本）1</h1>
+  <div class="home-page">
+    <div v-if="pageNum === 1" class="home-page-type">
+      <div class="home-page-type-title">欢迎使用智能情报分析系统</div>
+      <div class="home-page-type-tip">请上传需要分析的文件</div>
+      <div class="home-page-type-upload">
+        <el-upload
+          class="upload-box"
+          drag
+          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+        >
+          <div>
+            <img src="@/assets/home/data_template.png" />
+          </div>
+          <div class="mt-14 mb-5">
+            <img src="@/assets/home/Data_template_btn.png" />
+          </div>
+          <div class="el-upload__text"><em>点击上传</em>或拖拽支持的文件</div>
+        </el-upload>
+        <el-upload
+          class="upload-box"
+          drag
+          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+        >
+          <div>
+            <img src="@/assets/home/OCR_template.png" />
+          </div>
+          <div class="mt-14 mb-5">
+            <img src="@/assets/home/OCR_template_btn.png" />
+          </div>
+          <div class="el-upload__text"><em>点击上传</em>或拖拽支持的文件</div>
+        </el-upload>
+      </div>
+      <div class="home-page-type-footer">
+        上传资金明细数据请确保有如下信息的表头:交易卡号、交易账号、交易证件号码、交易户名、交易日期、交易金额、交易余额、收付标志、对手户名、对手账号、对手卡号、对手开户银行、摘要说明、IP地址、MAC地址、备注、案件编号，且已将交易证件号码补充完整。
+      </div>
+    </div>
+    <div v-else-if="pageNum === 2">
+      <div class="home-page-analysis">
+        <div class="analysis-box">
+          <div class="analysis-box-top">
+            <div class="analysis-box-top-left">
+              <div class="mr-3">
+                <component :is="toRaw(excelIcon)" />
+              </div>
+              <div class="analysis-box-top-file-name">
+                当前文件：<span>{{ fileList[0].name }}</span>
+              </div>
+            </div>
+            <div class="analysis-box-top-right">
+              <el-upload
+                v-model:file-list="fileList"
+                :show-file-list="false"
+                class="upload-btn"
+                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+                :limit="1"
+                :on-change="handleChange"
+              >
+                <el-button type="primary" color="#5070F2" plain
+                  >上传文件</el-button
+                >
+              </el-upload>
+            </div>
+          </div>
+          <div class="analysis-box-middle">
+            <div class="mr-3">
+              <el-input
+                v-model="textarea"
+                style="width: 1263px"
+                :autosize="{ minRows: 1, maxRows: 4 }"
+                type="textarea"
+                placeholder="请输入证件号进行分析"
+              />
+            </div>
+            <div>
+              <el-button type="primary" color="#5070F2">开始分析</el-button>
+            </div>
+          </div>
+          <div class="analysis-box-bottom">
+            可输入单个证件号码进行分析，若需分析多个主体，请将证件号码用“|”隔开
+          </div>
+          <div class="analysis-box-icon">
+            <img src="@/assets/home/analysis_icon.png" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="home-page-result">
+      <div class="home-page-result-top">
+        <el-collapse
+          v-model="activeName"
+          accordion
+          @change="handleChangeCollapse"
+        >
+          <el-collapse-item name="1">
+            <template #title>
+              <div class="collapse-header">
+                <div class="collapse-header-left">
+                  <div class="mr-3">
+                    <component :is="toRaw(excelIcon)" />
+                  </div>
+                  <div class="collapse-header-file-name">
+                    当前文件：<span>{{ fileList[0].name }}</span>
+                  </div>
+                  <div class="collapse-header-top-right">
+                    <el-upload
+                      v-model:file-list="fileList"
+                      :show-file-list="false"
+                      class="upload-btn"
+                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+                      :limit="1"
+                      :on-change="handleChange"
+                    >
+                      <el-button
+                        type="primary"
+                        color="#5070F2"
+                        class="w[100px] h-8"
+                        plain
+                        @click.stop="
+                          () => {
+                            console.log('111');
+                          }
+                        "
+                        >上传文件</el-button
+                      >
+                    </el-upload>
+                  </div>
+                </div>
+                <div class="collapse-header-right">
+                  {{ activeName === "1" ? "收起文件" : "展开文件" }}
+                </div>
+              </div>
+            </template>
+            <div class="collapse-box">
+              <div class="collapse-box-middle">
+                <div class="mr-3">
+                  <el-input
+                    v-model="textarea"
+                    style="width: 1263px"
+                    :autosize="{ minRows: 1, maxRows: 4 }"
+                    type="textarea"
+                    placeholder="请输入证件号进行分析"
+                  />
+                </div>
+                <div>
+                  <el-button type="primary" color="#5070F2">开始分析</el-button>
+                </div>
+              </div>
+              <div class="collapse-box-bottom">
+                可输入单个证件号码进行分析，若需分析多个主体，请将证件号码用“|”隔开
+              </div>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+      <div class="home-page-result-middle">
+        <div class="home-page-result-content">
+          <div class="home-page-result-content-left">
+            <div class="home-page-result-content-left-top">
+              <el-input
+                v-model="inputValue"
+                size="large"
+                class="border-0"
+                placeholder="搜索"
+                :prefix-icon="Search"
+              />
+            </div>
+            <div class="home-page-result-content-left-middle">
+              <div class="result-content-left-middle-box">
+                <el-checkbox v-model="checkedValue" />
+                <div class="left-middle-box">
+                  <div class="w[48px] h[48px] mr-3">
+                    <img src="@/assets/home/resultDefaultAvatar.png" />
+                  </div>
+                  <div class="flex-1 left-middle-box-bottom">
+                    <img src="@/assets/home/data_analysis.gif" />
+                    <span>数据分析中...</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="home-page-result-content-left-bottom">
+              <div>
+                <el-checkbox v-model="checkAll" @change="handleCheckAllChange">
+                  全选
+                </el-checkbox>
+              </div>
+              <el-button
+                link
+                class="result-content-left-bottom-btn"
+                :icon="exportIcon"
+                >导出已分析文件</el-button
+              >
+            </div>
+          </div>
+          <div class="home-page-result-content-right">
+            <div class="home-page-result-content-right-header">
+              <el-button type="primary" color="#5070F2">查看文档</el-button>
+            </div>
+            <div class="home-page-result-content-right-content">
+              <el-empty
+                v-if="false"
+                :image="emptyIcon"
+                :image-size="372"
+                description="资金数据分析中~"
+                class="mt-52"
+              />
+              <div v-else class="result-content-right-content-box">
+                <div class="in-and-out-account-box-first">
+                  <div class="account-box-first-left w-[52%] h-[370px]">
+                    <AccountChartBar
+                      :requireData="barChartData[0].requireData"
+                      :questionData="barChartData[1].questionData"
+                    />
+                  </div>
+                  <div class="account-box-first-right w-[47%] h-[370px]">
+                    <AccountChartPie />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+<style lang="scss" scoped>
+.home-page {
+  width: 100%;
+  height: 100%;
+  margin: 0 !important;
+  background-image: url("@/assets/home/home_bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.home-page-type {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  .home-page-type-title {
+    font-size: 32px;
+    font-style: normal;
+    font-weight: bold;
+    line-height: 38px;
+    color: #333;
+    text-align: left;
+    text-transform: none;
+  }
+
+  .home-page-type-tip {
+    margin: 16px 0 32px;
+    font-size: 20px;
+    font-style: normal;
+    // font-family: "PingFang SC";
+    font-weight: 500;
+    line-height: 23px;
+    color: #333;
+    text-align: left;
+    text-transform: none;
+  }
+
+  .home-page-type-upload {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+
+    .upload-box {
+      width: 710px;
+      height: 360px;
+
+      :deep(.el-upload-dragger) {
+        width: 710px;
+        height: 360px;
+        background-color: transparent;
+        background-image: url("@/assets/home/upload_bg.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        border-radius: 14px;
+      }
+
+      .el-upload__text {
+        font-size: 16px;
+        font-style: normal;
+        // font-family: "PingFang SC";
+        font-weight: 500;
+        color: #333;
+        text-transform: none;
+
+        em {
+          color: #5070f2;
+          text-decoration-line: underline;
+        }
+      }
+    }
+
+    & > :first-child {
+      margin-right: 20px;
+    }
+  }
+
+  .home-page-type-footer {
+    width: 1440px;
+    font-size: 16px;
+    font-style: normal;
+    // font-family: "PingFang SC";
+    font-weight: 500;
+    line-height: 24px;
+    color: #666;
+    text-align: left;
+    text-transform: none;
+  }
+}
+
+.home-page-analysis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  .analysis-box {
+    position: relative;
+    box-sizing: border-box;
+    width: 1440px;
+    height: 240px;
+    padding: 64px 32px;
+    margin-top: 222px;
+    background: linear-gradient(180deg, #d6deff 0%, #fff 19%);
+    border: 2px solid rgb(80 112 242 / 30%);
+    border-radius: 12px;
+
+    .analysis-box-top {
+      display: flex;
+      place-items: center center;
+
+      .analysis-box-top-left {
+        display: flex;
+        place-items: center center;
+        margin-right: 24px;
+
+        .analysis-box-top-file-name {
+          font-size: 16px;
+          font-style: normal;
+          // font-family: "PingFang SC";
+          font-weight: bold;
+          line-height: 19px;
+          color: #666;
+          text-align: left;
+          text-transform: none;
+
+          span {
+            font-weight: bold;
+            color: #333;
+          }
+        }
+      }
+    }
+
+    .analysis-box-middle {
+      display: flex;
+      place-items: center center;
+      margin: 16px 0 12px;
+    }
+
+    .analysis-box-bottom {
+      font-size: 14px;
+      font-style: normal;
+      // font-family: "PingFang SC";
+      font-weight: 500;
+      line-height: 24px;
+      color: #666;
+      text-align: left;
+      text-transform: none;
+    }
+
+    .analysis-box-icon {
+      position: absolute;
+      top: -70px;
+      right: 0;
+    }
+  }
+}
+
+.home-page-result {
+  width: 100%;
+  height: 100%;
+
+  .home-page-result-top {
+    width: 100%;
+    margin-top: 1px;
+    background: #fff;
+
+    :deep(.el-collapse-item__header) {
+      box-sizing: border-box;
+      height: 80px;
+      padding: 24px 32px;
+    }
+
+    :deep(.el-collapse-item__arrow) {
+      color: #5070f2;
+    }
+
+    .collapse-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+
+      .collapse-header-left {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .collapse-header-file-name {
+          margin-right: 24px;
+          font-size: 16px;
+          font-style: normal;
+          // font-family: "PingFang SC";
+          font-weight: bold;
+          line-height: 19px;
+          color: #666;
+          text-align: left;
+          text-transform: none;
+
+          span {
+            font-weight: bold;
+            color: #333;
+          }
+        }
+      }
+
+      .collapse-header-right {
+        margin-right: 8px;
+        font-size: 16px;
+        font-style: normal;
+        // font-family: "PingFang SC";
+        font-weight: 500;
+        line-height: 19px;
+        color: #5070f2;
+        text-align: left;
+        text-transform: none;
+      }
+    }
+
+    .collapse-box {
+      box-sizing: border-box;
+      padding: 0 32px;
+
+      .collapse-box-middle {
+        display: flex;
+        place-items: center center;
+        margin-bottom: 8px;
+      }
+
+      .collapse-box-bottom {
+        font-size: 14px;
+        font-style: normal;
+        // font-family: "PingFang SC";
+        font-weight: 500;
+        line-height: 24px;
+        color: #666;
+        text-align: left;
+        text-transform: none;
+      }
+    }
+  }
+
+  .home-page-result-middle {
+    box-sizing: border-box;
+    width: 100%;
+    height: calc(100% - 170px);
+    padding: 20px 32px 24px;
+
+    .home-page-result-content {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      background: #fff;
+      border-radius: 8px;
+
+      .home-page-result-content-left {
+        z-index: 99;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 340px;
+        height: 100%;
+        border-radius: 8px 0 0 8px;
+        box-shadow: 1px 0 0 0 #dcdcdc;
+
+        .home-page-result-content-left-top {
+          width: 100%;
+          height: 40px;
+
+          :deep(.el-input__wrapper) {
+            border: none !important; /* 使用 !important 来确保覆盖默认样式 */
+            box-shadow: none !important;
+          }
+        }
+
+        .home-page-result-content-left-middle {
+          box-sizing: border-box;
+          flex: 1;
+          width: 100%;
+          padding: 16px;
+
+          .result-content-left-middle-box {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            height: 86px;
+
+            .left-middle-box {
+              box-sizing: border-box;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              width: 282px;
+              height: 100%;
+              padding: 0 16px;
+              background: #eef1fe;
+              border: 1px solid #5070f2;
+              border-radius: 4px;
+
+              .left-middle-box-bottom {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                span {
+                  margin-left: 4px;
+                  font-size: 12px;
+                  font-style: normal;
+                  // font-family: "PingFang SC";
+                  font-weight: 500;
+                  line-height: 22px;
+                  color: #000;
+                  text-align: left;
+                  text-transform: none;
+                }
+              }
+              // :deep(.el-progress-bar__outer) {
+              // }
+            }
+          }
+        }
+
+        .home-page-result-content-left-bottom {
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          height: 46px;
+          padding-inline: 16px;
+          background: #fcfdff;
+          border-radius: 0 0 8px 8px;
+          box-shadow: 0 -4px 8px 0 #f1f5fe;
+
+          .result-content-left-bottom-btn {
+            color: #5070f2;
+          }
+        }
+      }
+
+      .home-page-result-content-right {
+        flex: 1;
+        width: 100%;
+        height: 100%;
+
+        .home-page-result-content-right-header {
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          width: 100%;
+          height: 64px;
+          padding: 16px;
+          background: #fcfdff;
+          border-radius: 0 8px 0 0;
+          box-shadow: 0 1px 0 0 #e0e0e0;
+        }
+
+        .home-page-result-content-right-content {
+          box-sizing: border-box;
+          width: 100%;
+          height: 100%;
+
+          :deep(.el-empty__description p) {
+            font-size: 16px;
+            font-style: normal;
+            // font-family: " PingFang SC";
+            font-weight: 500;
+            line-height: 19px;
+            color: #666;
+            text-align: left;
+            text-transform: none;
+          }
+
+          .result-content-right-content-box {
+            box-sizing: border-box;
+            padding: 16px 16px 24px;
+
+            .in-and-out-account-box-first {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              width: 100%;
+              height: 370px;
+
+              .account-box-first-left {
+                background: rgb(154 174 255 / 10%);
+                border-radius: 4px;
+              }
+
+              .account-box-first-right {
+                background: rgb(154 174 255 / 10%);
+                border-radius: 4px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>