feat: 接入 UserHome 前端业务代码（含真实 src/依赖，保留 projman 标准 CI）

2026-09-09 22:37:59 +08:00
parent a53ce07228
commit 4279f99be1
270 changed files with 12479 additions and 25715 deletions
@@ -0,0 +1,146 @@
+<template>
+    <div class="chart-wrap">
+        <Spin size="large" fix :show="loading">
+            <slot>
+                <SvgIcon name="loading" size="50" color="6280eb" />
+                <div class="table-spin-load">加载中</div>
+            </slot>
+        </Spin>
+        <div class="chart-box" v-show="!loading">
+            <Tabs type="card" v-model="tabActive" :animated="false" v-if="chartList.length > 0">
+                <TabPane v-for="item in chartList" :label="item.title">
+                    <div class="chart-item" :id="item.id">123</div>
+                </TabPane>
+            </Tabs>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch, nextTick } from "vue";
+import SvgIcon from "@/components/SvgIcon.vue";
+import useCurrentInstance from "@/utils/hook/useCurrentInstance";
+
+interface Props {
+    chartList: Array<any>;
+    loading: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    loading: false,
+});
+
+const { $echarts: echarts } = useCurrentInstance();
+const tabActive = ref(0);
+const pieChartColors = ref([
+    "#b2aefa",
+    "#21b664",
+    "#eeb329",
+    "#eae213",
+    "#20b6ab",
+    "#f79854",
+    "#ea5e45",
+    "#0978c9",
+    "#118eea",
+    "#68b9f1",
+]);
+
+watch(
+    () => props.loading,
+    (val: boolean) => {
+        if (!val) initChart(props.chartList[tabActive.value]);
+    },
+    { immediate: true }
+);
+
+watch(
+    () => tabActive.value,
+    (val: number) => {
+        initChart(props.chartList[val]);
+    }
+);
+
+async function initChart(data: any) {
+    await nextTick();
+    console.log(data);
+    var chartDom = document.getElementById(data.id);
+    var myChart = echarts.init(chartDom);
+
+    var titles = data.list.map((x: any) => x.k);
+
+    var data = data.list.map((x: any) => {
+        return {
+            value: x.v,
+            name: x.k,
+        };
+    });
+
+    var option = {
+        title: {
+            text: data.title,
+            x: "center",
+            y: "center",
+            itemGap: 50,
+            textStyle: {
+                color: "#666",
+                fontSize: 12,
+                fontWeight: "normal",
+            },
+            subtextStyle: {
+                color: "#de4751",
+                fontSize: 12,
+            },
+        },
+        series: [
+            {
+                name: "数据来源",
+                type: "pie",
+                radius: ["50%", "70%"],
+                hoverAnimation: false,
+                data: data,
+                minAngle: 15,
+                avoidLabelOverlap: true,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            formatter: "{b} \t{c}",
+                            //formatter: '{b}'
+                        },
+                        labelLine: {
+                            show: true,
+                        },
+                    },
+                    emphasis: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: "rgba(0, 0, 0, 0.5)",
+                    },
+                },
+            },
+        ],
+        color: pieChartColors.value,
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option);
+
+    // option && myChart.setOption(option);
+}
+</script>
+
+<style lang="scss" scoped>
+.chart-wrap {
+    // border: solid 1px green;
+    position: relative;
+    .chart-box {
+        height: 100%;
+    }
+    .chart-item {
+        margin-top: 40px;
+        height: 300px;
+    }
+}
+::v-deep .table-spin-load {
+    color: #577afb;
+}
+</style>