117 lines
3.0 KiB
Vue
117 lines
3.0 KiB
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" value-format="YYYY-MM-DD" range-separator="-"
|
|
start-placeholder="开始时间" end-placeholder="结束时间" @change="deteToQuery" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-form>
|
|
</el-card>
|
|
<el-card :key="date">
|
|
<template #header>
|
|
配送订单统计
|
|
</template>
|
|
<v-charts style="height: 350px" :option="sendOption" :autoresize="true" />
|
|
</el-card>
|
|
|
|
<el-card :key="date">
|
|
<template #header>
|
|
配送订单统计
|
|
</template>
|
|
<sendData :query-params="queryParams" :key="date"></sendData>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, onMounted } from "vue"
|
|
import vCharts from 'vue-echarts'
|
|
import sendData from "../components/sendData.vue"
|
|
import { apidelivery } from '@/api/statistics'
|
|
|
|
const date = ref([])
|
|
const queryParams = reactive({
|
|
start_time: "",
|
|
end_time: "",
|
|
})
|
|
|
|
const deteToQuery = () => {
|
|
queryParams.start_time = date.value[0]
|
|
queryParams.end_time = date.value[1]
|
|
initPage()
|
|
}
|
|
|
|
function getFirstAndLastDayOfCurrentMonth() {
|
|
var today = new Date();
|
|
var firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
|
|
var lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
|
|
var firstDayFormatted = formatDate(firstDay);
|
|
var lastDayFormatted = formatDate(lastDay);
|
|
return { firstDay: firstDayFormatted, lastDay: lastDayFormatted };
|
|
}
|
|
|
|
function formatDate(date) {
|
|
var year = date.getFullYear();
|
|
var month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
var day = date.getDate().toString().padStart(2, '0');
|
|
return `${year}-${month}-${day}`;
|
|
}
|
|
|
|
date.value[0] = getFirstAndLastDayOfCurrentMonth().firstDay;
|
|
date.value[1] = getFirstAndLastDayOfCurrentMonth().lastDay;
|
|
|
|
|
|
|
|
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
|
|
},
|
|
{
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
type: 'line',
|
|
smooth: true
|
|
}
|
|
]
|
|
|
|
})
|
|
|
|
const getData = () => {
|
|
|
|
apidelivery(queryParams).then(res => {
|
|
console.log(res)
|
|
sendOption.xAxis.data = res.statistics.range
|
|
sendOption.series[0].data = res.statistics.data.order_amount
|
|
sendOption.series[1].data = res.statistics.data.user_number
|
|
})
|
|
|
|
}
|
|
|
|
|
|
const initPage = () => {
|
|
getData()
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
deteToQuery()
|
|
})
|
|
</script> |