multiStoreAdmin/src/views/workbench/delivery/index.vue

<!-- 业绩统计 -->
<!-- 业绩统计 -->
<!-- 业绩统计 -->
<!-- 业绩统计 -->
<!-- 业绩统计 -->
<template>
    <el-card class="!border-none mb-4" shadow="never">
        <el-form class="mb-[-16px]" :model="queryParams" label-width="80px">
            <el-row>
                <el-col :span="10">
                    <el-form-item label="时间筛选">
                        <el-select class="mr-1" v-model="queryParams.timeType" placeholder="时间类型筛选">
                            <el-option label="交易时间" :value="0" />
                            <el-option label="发货时间" :value="0" />
                            <el-option label="核销时间" :value="0" />
                        </el-select>
                        <el-date-picker v-model="date" type="daterange" range-separator="-" start-placeholder="开始时间"
                            end-placeholder="结束时间" value-format="YYYY-MM-DD" :clearable="false" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="店员">
                        <el-select v-model="queryParams.staff_id" placeholder="请选择店员">
                            <el-option :label="item.staff_name" :value="item.id" v-for="(item, index) in staffList" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="订单类型">
                        <el-select class="mr-1" v-model="queryParams.timeType" placeholder="选择订单类型">
                            <el-option label="交易时间" :value="0" />
                            <el-option label="发货时间" :value="0" />
                            <el-option label="核销时间" :value="0" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                        <el-button type="primary" @click="handleResetPage">查询</el-button>
                        <el-button @click="handleResetParams">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>


    <el-card class="!border-none mb-4" shadow="never">
        <el-row>
            <el-col :span="18">
                <v-charts style="height: 350px" :option="barOption" :autoresize="true" />
            </el-col>
            <el-col :span="6">
                <v-charts style="height: 350px" :option="pieOption" :autoresize="true" />
            </el-col>
        </el-row>
    </el-card>


    <el-card class="!border-none" v-loading="pager.loading" shadow="never">
        <el-table :data="pager.lists">
            <el-table-column label="订单号" prop="progress" show-overflow-tooltip />
            <el-table-column label="用户类型" prop="progress" show-overflow-tooltip />
            <el-table-column label="实际支付" prop="progress" show-overflow-tooltip />
            <el-table-column label="订单类型" prop="progress" show-overflow-tooltip />
            <el-table-column label="支付方式" prop="progress" show-overflow-tooltip />
            <el-table-column label="店员名称" prop="progress" show-overflow-tooltip />
            <el-table-column label="下单时间" prop="progress" show-overflow-tooltip />
        </el-table>
        <div class="flex mt-4 justify-end">
            <pagination v-model="pager" @change="getLists" />
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"
import { apiStaffLists } from '@/api/goodsList.ts'
import vCharts from 'vue-echarts'
import { usePaging } from '@/hooks/usePaging'
import { apiTableLists } from '@/api/employeStatistic.ts'

const date = ref([])

const queryParams = reactive({
    timeType: "",
    order_id: "",
    pay_type: "",
    start_time: "",
    end_time: '',
    status: "",
    staff_id: ""

})

const handleResetPage = () => {
    if (date.value.length) {
        queryParams.start_time = date.value[0]
        queryParams.end_time = date.value[1]
    }
}

const handleResetParams = () => {
    date.value = []
    for (let key in queryParams) {
        queryParams[key] = ''
    }
}

const staffList = ref([])
const getStaffList = async () => {
    let res = await apiStaffLists()
    staffList.value = res
}
getStaffList()



const barOption = reactive({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Sun', 'Sun', 'Sun', 'Sun', 'Sun', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [120, 200, 150, 80, 70, 110, 130, 200, 130, 400, 100, 200, 200],
            type: 'bar'
        }
    ]

})

const pieOption = reactive(
    {
        title: {
            text: '交易类型',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '张某' },
                    { value: 735, name: '刘某' },
                    { value: 580, name: '赵某' },
                    { value: 124, name: '罗某' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
)


// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiTableLists,
})

getLists()
</script>