engineering_admin/src/views/workbench/index.vue

<template>
    <div class="workbench">
        <el-card shadow="never" class=" !border-none">
            <div class="flex flex-wrap">
                <div class="w-1/5 flex mb-6" v-for="(item, index) in basicList" :key="index">
                    <div class="mr-2">
                        <div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 8] }">
                            <iconfont :iconName="item.icon" white className="text-6xl" />
                        </div>
                    </div>
                    <div>
                        <div class="text-info">{{ item.name }}</div>
                        <div class="text-6xl">{{ item.num }}</div>
                        <!-- <div class="text-info">环比增长: <span :class="item.percent > 0 ? 'text-success' : 'text-danger'">{{
                            item.percent }}%</span></div> -->
                    </div>
                </div>
            </div>
        </el-card>
        <el-card shadow="never" class="mt-4 !border-none">
            <div>
                <div class="mb-6 flex justify-between items-center">
                    <span class="text-2xl">趋势</span>
                </div>
                <v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="statistics_user">
import { getWorkbench } from '@/api/app'
import moment from 'moment'
import vCharts from 'vue-echarts'

// 表单数据
const visitorOption: any = reactive({
    xAxis: {
        type: 'category',
        data: [0],
        axisLabel: {
            rotate: 45,
            color: '#333'
        }
    },
    yAxis: {
        type: 'value',
        position: 'left',
        axisLabel: {
            formatter: '{value}'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    legend: {
        data: ['访问量']
    },
    itemStyle: {
        // 点的颜色。
        color: 'red'
    },
    tooltip: {
        trigger: 'axis'
    },
    series: [
        {
            name: '访问量',
            data: [0],
            type: 'line',
            smooth: true
        }
    ]
})

// 颜色
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
const basicList = reactive([
    // {
    //     name: '访客数',
    //     type: 'people',
    //     icon: 'RectangleCopy',
    //     num: 0,
    //     percent: 0
    // },
    // {
    //     name: '浏览量',
    //     type: 'browse',
    //     icon: 'RectangleCopy49',
    //     num: 0,
    //     percent: 0
    // },
    // {
    //     name: '新增用户数',
    //     type: 'newUser',
    //     icon: 'RectangleCopy53',
    //     num: 0,
    //     percent: 0
    // },
    // {
    //     name: '成交用户数',
    //     type: 'payPeople',
    //     icon: 'RectangleCopy5',
    //     num: 0,
    //     percent: 0
    // },
    // {
    //     name: '访客-支付转换率',
    //     type: 'payPercent',
    //     icon: 'RectangleCopy4',
    //     num: 0,
    //     percent: 0
    // },
    // {
    //     name: '激活付费会员数',
    //     type: 'payUser',
    //     icon: 'RectangleCopy7',
    //     num: 0,
    //     percent: 0
    // },
    // {
    //     name: '充值用户数',
    //     type: 'rechargePeople',
    //     icon: 'RectangleCopy59',
    //     num: 0,
    //     percent: 0
    // },
    // {
    //     name: '客单价',
    //     type: 'payPrice',
    //     icon: 'RectangleCopy15',
    //     num: 0,
    //     percent: 0
    // },
    // {
    //     name: '累计用户',
    //     type: 'cumulativeUser',
    //     icon: 'RectangleCopy54',
    //     num: 0,
    //     percent: 0
    // },
    // {
    //     name: '累计付费会员数',
    //     type: 'cumulativePayUser',
    //     icon: 'RectangleCopy7',
    //     num: 0,
    //     percent: 0
    // },
    // {
    //     name: '累计充值用户数',
    //     type: 'cumulativeRechargePeople',
    //     icon: 'RectangleCopy6',
    //     num: 0,
    //     percent: 0
    // },
    // {
    //     name: '累计成交用户数',
    //     type: 'cumulativePayPeople',
    //     icon: 'RectangleCopy9',
    //     num: 0,
    //     percent: 0
    // }
])
function getLastMonthRange() {
    // 获取今天的日期
    let today = new Date();

    // 获取上个月的日期
    let lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());

    // 格式化日期为 "年-月-日"
    let formatDateString = (date) => {
        let year = date.getFullYear();
        let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1，并且补0
        let day = String(date.getDate()).padStart(2, '0'); // 补0
        return `${year}-${month}-${day}`;
    };

    // 格式化上个月和今天的日期
    let lastMonthFormatted = formatDateString(lastMonth);
    let todayFormatted = formatDateString(today);

    // 返回结果数组
    return [lastMonthFormatted, todayFormatted];
}


const startEndTime = ref([new Date(), new Date()]);
const startEndTime2 = ref(getLastMonthRange());


const getData2 = () => {
    let date = '';
    if (startEndTime2.value[0] && startEndTime2.value[1]) date = moment(startEndTime2.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime2.value[1]).format('YYYY/MM/DD');
    getWorkbench({
        date: date
    }).then(res => {
        // 清空echarts 数据
        visitorOption.xAxis.data = []
        visitorOption.series = []
        console.log(res)
        visitorOption.xAxis.data = Object.keys(res[0].value)

        res.forEach((item, index) => {
            visitorOption.series[index] = {
                type: 'line',
                smooth: true,
                data: Object.values(item.value),
                name: item.title

            }
            basicList[index] = {
                name: item.title,
                type: 'payPrice',
                icon: 'RectangleCopy14',
                num: item.total_money,
            }
            visitorOption.legend.data.push(item.title)
        })
    })
}

onMounted(() => {
    getData2()
})
</script>

<style lang="scss" scoped></style>