multiStoreAdmin/src/views/workbench/index.vue

<template>
    <el-card>
        <el-form class="mb-[-16px]" :model="queryParams" label-width="80px">
            <el-col :span="6">
                <el-form-item label="时间筛选">
                    <el-date-picker v-model="date" type="daterange" range-separator="-" start-placeholder="开始时间"
                        end-placeholder="结束时间" />
                </el-form-item>
            </el-col>
        </el-form>
    </el-card>
    <el-card>
        <el-row>
            <el-col :span="6" class='flex mb-7' v-for="(item, index) in statisticLists" :key="index">
                <img class="w-[50px] h-[50px] mr-2" :src="item.src" />
                <el-statistic :title="item.title" :value="item.value" />
            </el-col>
        </el-row>
    </el-card>
    <el-card>
        <template #header>
            营业趋势
        </template>
        <v-charts style="height: 350px" :option="visitorOption" :autoresize="true" />
    </el-card>
    <el-row>
        <el-col :span="14">
            <el-card class="h-[100%]">
                <template #header>
                    交易数据
                </template>
                <tradData></tradData>
            </el-card>
        </el-col>
        <el-col :span="10">
            <el-card>
                <template #header>
                    交易类型
                </template>
                <v-charts style="height: 350px" :option="tradTypeOption" :autoresize="true" />
            </el-card>
        </el-col>
    </el-row>
    <el-card>
        <template #header>
            配送订单统计
        </template>
        <v-charts style="height: 350px" :option="sendOption" :autoresize="true" />
    </el-card>

    <el-card>
        <template #header>
            配送订单统计
        </template>
        <sendData></sendData>
    </el-card>
</template>

<script lang="ts" setup name="manageProjectLists">
import { ref, reactive } from "vue"
import { getWorkbench } from '@/api/app'
import vCharts from 'vue-echarts'
import tradData from "./components/tradData.vue"
import sendData from "./components/sendData.vue"

const src = ref('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg')
const date = ref("")



const statisticLists = reactive([
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701552002039.png',
        title: "核销订单金额",
        value: 1000
    },
    {
        src: "https://ceshi-engineering.lihaink.cn/uploads/files/20240604/2024060417170150a511510.png",
        title: "余额消费金额",
        value: 1000
    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701594ff8897.png',
        title: "门店收益金额",
        value: 1000
    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/202406041717018a22e1161.png',
        title: "线下收银订单金额",
        value: 1000
    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/202406041717013a08c6793.png',
        title: "现金收银订单金额",
        value: 1000
    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/2024060417170103b0a9686.png',
        title: "门店新增用户数",
        value: 1000
    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701469b91377.png',
        title: "门店成交用户数",
        value: 1000
    },
    {
        src: 'https://ceshi-engineering.lihaink.cn/uploads/files/20240604/20240604171701fbb680115.png',
        title: "门店营业额",
        value: 1000
    },

])


const visitorOption = reactive({
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    legend: {
        data: ['营业额']
    },
    itemStyle: {
        // 点的颜色。
        color: 'red'
    },
    tooltip: {
        trigger: 'axis'
    },
    series: [
        {
            name: '营业额',
            data: [0],
            type: 'line',
            smooth: true
        }
    ]
})

const tradTypeOption = reactive(
    {
        title: {
            text: '交易类型',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '线上收银订单' },
                    { value: 735, name: '现金收银订单' },
                    { value: 580, name: '核销订单' },
                    { value: 484, name: '充值订单' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
)



const sendOption = reactive({
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
        }
    ]

})


const getData = () => {
    getWorkbench()
        .then((res: any) => {

            // 清空echarts 数据
            visitorOption.xAxis.data = []
            visitorOption.series[0].data = []

            // 写入从后台拿来的数据
            res.visitor.date.reverse().forEach((item: any) => {
                visitorOption.xAxis.data.push(item)
            })
            res.visitor.list[0].data.forEach((item: any) => {
                visitorOption.series[0].data.push(item)
            })
        })
        .catch((err: any) => {
            console.log('err', err)
        })
}

onMounted(() => {
    getData()
})

</script>