lihaiMiddleOfficeAdminWeb/src/views/store/statistics/index.vue

<template>
    <div class="workbench">
        <el-card shadow="never" class=" !border-none">
            <div class="flex justify-between items-center">
                <span class="text-2xl">运营概况</span>
                <div class="flex items-center text-sm">
                    <span class="mr-4">时间筛选: </span>
                    <el-date-picker v-model="startEndTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts" />
                    <el-button type="primary" class="ml-4" @click="getData">查询</el-button>
                </div>
            </div>
        </el-card>
        <div class="flex flex-wrap box-border mt-4">
            <div class="box-border w-1/5" v-for="(item, index) in basicList" :key="index">
                <el-card class="!border-none ml-4 mb-4 flex" :class="{ '!ml-0': index % 5 === 0 }" shadow="never">
                    <div class="flex">
                        <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>
                    </div>

                </el-card>
            </div>

        </div>
        <el-card shadow="never" class=" !border-none">
            <span class="text-2xl">营业趋势</span>
            <v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
        </el-card>
        <div class="mt-4 flex justify-center">
            <el-card shadow="never" class="flex-1 !border-none">
                <span class="text-2xl">交易数据</span>
                <el-table :data="orderList" class="mt-4" height="280">
                    <el-table-column prop="avatar" label="头像" min-width="55">
                        <template #default="{ row }">
                            <el-avatar :size="40" :src="row.avatar" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="nickname" label="用户名称" />
                    <el-table-column prop="order_id" label="订单号" min-width="200" />
                    <el-table-column prop="pay_price" label="交易金额" />
                    <el-table-column prop="pay_time" label="成交时间">

                    </el-table-column>
                </el-table>
            </el-card>
            <el-card shadow="never" class="w-[500px] !border-none ml-4">
                <span class="text-2xl">交易类型</span>
                <v-charts style="height: 300px" :option="circleOption" :autoresize="true" />
            </el-card>
        </div>
        <!-- <el-card shadow="never" class="mt-4 !border-none">
            <span class="text-2xl">门店业绩</span>
            <el-table :data="storeList" class="mt-4">
                <el-table-column prop="avatar" label="logo" min-width="55">
                    <template #default="{ row }">
                        <el-avatar :size="40" :src="row.avatar" />
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="门店名称" />
                <el-table-column prop="store_price" label="门店实际收款"/>
                <el-table-column prop="store_order_price" label="门店商品销售额" />
                <el-table-column prop="store_product_count" label="门店商品销量" />
                <el-table-column prop="store_user_count" label="门店新增用户数" />
            </el-table>
        </el-card> -->
    </div>
</template>

<script lang="ts" setup name="statistics_store">
import { apiGetUserBasic, apiGetUserTrend } from '@/api/workbench'
import { apiSystemStoreStatisticsHeader, apiSystemStoreStatisticsOperate, apiSystemStoreStatisticsOrderChart, apiSystemStoreStatisticsStore } from '@/api/system_store'
import moment from 'moment'
import vCharts from 'vue-echarts'

const shortcuts = [
    {
        text: '近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 7)
            return [start, end]
        },
    },
    {
        text: '近一月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 1)
            return [start, end]
        },
    },
    {
        text: '近三月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 3)
            return [start, end]
        },
    },
]

// 表单数据
const visitorOption: any = reactive({
    xAxis: {
        type: 'category',
        data: [0],
        axisLabel: {
            rotate: 45,
            color: '#333'
        }
    },
    yAxis: [
        {
            type: 'value',
            name: '用户数量',
            position: 'left',
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '金额',
            position: 'right',
            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 circleOption: any = reactive({
    tooltip: {
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        data: []
    },
    series: [
        {
            name: "交易类型",
            type: "pie",
            radius: ["35%", "65%"],
            center: ["50%", "60%"],
            data: [],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                }
            }
        }
    ],

})
const orderList: any = ref([])
const storeList: any = ref([])

// 颜色
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
const basicList = reactive([
    {
        name: '门店订单金额',
        type: 'store_income',
        icon: 'RectangleCopy',
        num: 0,

    },
    {
        name: '余额消耗金额',
        type: 'store_use_yue',
        icon: 'RectangleCopy49',
        num: 0,

    },
    {
        name: '用户充值金额',
        type: 'recharge_price',
        icon: 'RectangleCopy53',
        num: 0,

    },
    {
        name: '收银订单金额',
        type: 'cashier_order_price',
        icon: 'RectangleCopy5',
        num: 0,

    },
    {
        name: '付费会员金额',
        type: 'vip_price',
        icon: 'RectangleCopy4',
        num: 0,

    },
    {
        name: '分配订单金额',
        type: 'store_income',
        icon: 'RectangleCopy7',
        num: 0,

    },
    {
        name: '核销订单金额',
        type: 'store_writeoff_order_price',
        icon: 'RectangleCopy59',
        num: 0,

    },
    {
        name: '门店新增用户数',
        type: 'store_user_count',
        icon: 'RectangleCopy15',
        num: 0,

    },
    {
        name: '门店成交用户数',
        type: 'store_pay_user_count',
        icon: 'RectangleCopy54',
        num: 0,

    },
    // {
    //     name: '微信会员卡激活数',
    //     type: 'card_count',
    //     icon: 'RectangleCopy7',
    //     num: 0,
    // },
])
const startEndTime = ref(['', '']);
// 获取数据
const getData = () => {
    let date = '';
    if (startEndTime.value[0] && startEndTime.value[1]) date = moment(startEndTime.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime.value[1]).format('YYYY/MM/DD');
    apiSystemStoreStatisticsHeader({
        date: date
    }).then(res => {
        basicList.forEach((item: any) => {
            item.num = res[item.type];
        })
    })
    apiSystemStoreStatisticsOperate({
        date: date
    }).then(res => {
        // 清空echarts 数据
        visitorOption.xAxis.data = []
        visitorOption.series = []
        visitorOption.legend.data = res.series.map((item: any) => item.name);

        // 写入从后台拿来的数据
        visitorOption.xAxis.data = res.xAxis;
        visitorOption.series = res.series.map((item: any) => {
            if (item.name == '新增用户数') item.yAxisIndex = 0;
            return item;
        });

    })
    apiSystemStoreStatisticsOrderChart({
        date: date
    }).then(res => {
        circleOption.legend.data = res.bing_xdata;
        // 写入从后台拿来的数据
        circleOption.series[0].data = res.bing_data;
        orderList.value = res.order_list;
    })
    // apiSystemStoreStatisticsStore({
    //     date: date
    // }).then(res => {
    //     storeList.value = res;
    // })
}


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

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