crm-app-vue3/pages/person/cards/index.vue

<template>
    <view class="person_cards_wrap">
        <view class="cards_container">
            <!-- 今天消耗 -->
            <view class="card_item today">
                <view class="card_item_content">
                    <view class="card_header">
                        <text class="card_title">今天消耗（元）</text>
                    </view>
                    <view class="card_content">
                        <text class="card_value">{{ cardData.todayConsume }}</text>
                    </view>
                </view>
                <view class="card_item_content">
                    <view class="card_header">
                        <text class="card_title">今天业绩（元）</text>
                    </view>
                    <view class="card_content">
                        <text class="card_value">{{ cardData.todayPerformance }}</text>
                    </view>
                </view>
            </view>
            <!-- 条数统计 -->
            <view class="card_item card_item_full">
                <view class="card_header count">
                    <i class="iconfont icon-crm-tongji" style="font-size: 30rpx;color: #4c8afe;"></i>
                    <text class="card_title">条数统计</text>
                </view>
                <view class="card_content">
                    <view class="count_stats">
                        <view class="count_item">
                            <text class="count_value">{{ cardData.countTypeA }}</text>
                            <text class="count_label">A类</text>
                        </view>
                        <view class="count_item">
                            <text class="count_value">{{ cardData.countTypeB }}</text>
                            <text class="count_label">B类</text>
                        </view>
                        <view class="count_item">
                            <text class="count_value">{{ cardData.countTypeC }}</text>
                            <text class="count_label">C类</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 上门 -->
            <view class="card_item card_item_full">
                <view class="card_content">
                    <view class="visit_stats">
                        <view class="visit_item">
                            <text class="visit_label">上门</text>
                            <text class="visit_value visitc_count">{{ cardData.visitCount }}</text>
                        </view>
                        <view class="visit_item">
                            <text class="visit_label">上门率</text>
                            <text class="visit_value">{{ cardData.visitRate }}</text>
                        </view>
                        <view class="visit_item">
                            <text class="visit_label">成交率</text>
                            <text class="visit_value">{{ cardData.dealRate }}</text>
                        </view>
                        <view class="visit_item">
                            <text class="visit_label">投产比</text>
                            <text class="visit_value">{{ cardData.roi }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 当前排名 -->
            <view class="card_item card_item_full">
                <view class="card_content">
                    <view class="ranking_stats">
                        <view class="ranking_info">
                            <view class="ranking_icon">
                                <i class="iconfont icon-crm-jiangbei" style="font-size: 30rpx;color: #ca8a04;"></i>
                            </view>
                            <view class="ranking_info_text">
                                <text class="card_title">当前排名</text>
                                <text class="ranking_text">击败了{{ cardData.beatRate }}%的同事</text>
                            </view>
                        </view>
                        <view class="ranking_details">
                            <view class="ranking_detail_item">
                                <text class="ranking_detail_value">{{ cardData.level }}</text>
                                <text class="ranking_detail_label">等级</text>
                            </view>
                            <view class="ranking_detail_item">
                                <text class="ranking_detail_value">{{ cardData.score }}</text>
                                <text class="ranking_detail_label">评分</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 折线图 -->
            <view class="card_item">
                <view class="chart_header">
                    <i class="iconfont icon-crm-tubiao-zhexiantu" style="font-size: 30rpx;color: #6b7280;"></i>
                    <text class="card_title">近7天排名折线图</text>
                </view>
                <view class="charts_box">
                    <qiun-data-charts type="line" :chartData="chartData" canvasId="uniqueLineChart" :opts="opts"
                        width="700rpx" height="350rpx" backgroundColor="#ffffff" />
                </view>
            </view>
        </view>
        <!-- 最新线索 -->
        <view class="latest_clue" v-if="clueList.length > 0">
            <view class="clue_header">
                <text class="card_title">最新线索</text>
                <view class="more_btn" @click="toPrivateClue">
                    <text>更多</text>
                    <u-icon name="arrow-right" size="16" color="#2563eb"></u-icon>
                </view>
            </view>
            <view class="clue_list">
                <view class="clue_item" v-for="(item, index) in clueList" :key="index">
                    <view class="clue_star">
                        <u-icon name="star-fill" size="20" color="#facc15"></u-icon>
                        <text class="clue_name">{{ item.star }}</text>
                    </view>
                    <text class="clue_name">{{ item.name }}</text>
                    <view class="clue_info">
                        <text class="clue_title">{{ item.prodTitle }}</text>
                        <text class="clue_desc">{{ item.desc }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 卡片数据
            cardData: {
                todayConsume: '-',
                todayPerformance: '-',
                countTypeA: '-',
                countTypeB: '-',
                countTypeC: '-',
                visitCount: '-',
                visitRate: '-',
                dealRate: '-',
                roi: '-',
                beatRate: '-',
                level: '-',
                score: '-'
            },
            chartData: {
                categories: [],
                series: [
                    {
                        name: "核心数据",
                        data: [],
                        color: "#1890ff"
                    }
                ]
            },
            opts: {
                padding: [5, 0, 10, -20],
                backgroundColor: "#ffffff",
                xAxis: {
                    axisLine: { show: true, color: "#e5e5e5", width: 1 },
                    gridLine: { show: true, color: "#f5f5f5", width: 1 },
                    label: { fontSize: 24, color: "#666666", margin: 15 },
                    tickLine: { show: false },
                    lineStyle: {
                        type: 'solid'
                    },
                    axisLabel: {
                        padding: [0, 0, 0, -20]
                    }
                },
                yAxis: {
                    axisLine: { show: true, color: "#e5e5e5", width: 1 },
                    gridLine: { show: true, color: "#f5f5f5", width: 1 },
                    label: { fontSize: 24, color: "#666666", margin: 15 },
                    tickLine: { show: false },
                    splitNumber: 4,
                    min: 0,
                    max: 200
                },
                series: {
                    line: {
                        width: 6, // 折线宽度，确保可见
                        smooth: true, // 先设为直线，便于调试，后续可改为true
                        showSymbol: true, // 显示数据点，确保折线锚点可见
                        symbol: "circle",
                        symbolSize: 24,
                        symbolColor: "#ffffff",
                        symbolBorderColor: "#1890ff",
                        symbolBorderWidth: 8,
                        area: {
                            show: false,
                            color: "linear-gradient(to bottom, rgba(24,144,255,0.2), rgba(24,144,255,0))"
                        }
                    }
                },
                // 提示框：确保悬浮正常显示
                tooltip: {
                    show: true,
                    backgroundColor: "rgba(0,0,0,0.7)",
                    borderRadius: 6,
                    padding: [8, 12],
                    labelFontSize: 22,
                    labelColor: "#ffffff"
                },
                legend: {
                    show: false,
                    position: "top-right",
                    fontSize: 24,
                    color: "#666666",
                    margin: [0, 20, 0, 0]
                },
                title: {
                    show: false,
                    name: "趋势折线图",
                    fontSize: 28,
                    color: "#333333",
                    align: "left",
                    margin: [0, 0, 15, 0]
                }
            },
            clueList: [],
        };
    },

    methods: {
        getCardData() {
            uni.$u.api.getPersonCards().then(res => {
              if (res.code === 200) {
                this.cardData = res.data;
              }
            });
        },
        getClueList() {
            uni.$u.api.getPersonLatestClue().then(res => {
                if (res.code === 200) {
                    this.clueList = res.data;
                }
            });
        },
        getChartData() {
            uni.$u.api.getPersonRanking().then(res => {
                if (res.code === 200) {
                    this.chartData.categories = res.data.map(item => item.x);
                    this.chartData.series[0].data = res.data.map(item => item.y);
                }
            });
        },
        // 跳转私有线索页面
        toPrivateClue() {
            uni.switchTab({ url: '/pages/privateClue/index' });
        },
    },
    mounted() {
        // this.getCardData();
        // this.getClueList();
        // this.getChartData();
    },

};
</script>

<style lang="scss" scoped>
@import './styles/index.scss';
</style>