|
|
@@ -1,11 +1,299 @@
|
|
|
<template>
|
|
|
- <div class="home-content">11</div>
|
|
|
+ <div class="home-content">
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12" style="margin-bottom: 20px;">
|
|
|
+ <el-card shadow="never">
|
|
|
+ <div class="card-header">
|
|
|
+ <h3 class="card-title">订单总览</h3>
|
|
|
+ <el-radio-group v-model="queryKey" style="margin-bottom: 30px" @change="init">
|
|
|
+ <el-radio-button v-for="item in btns" :key="item.key" :value="item.key">{{ item.name }}</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6" v-for="item in orderReview" :key="item.key">
|
|
|
+ <el-statistic :value="data[item.key]">
|
|
|
+ <template #title>
|
|
|
+ <div>
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card shadow="never">
|
|
|
+ <div class="card-header">
|
|
|
+ <h3 class="card-title">人员总览</h3>
|
|
|
+ <el-radio-group v-model="userKey" style="margin-bottom: 30px" @change="init">
|
|
|
+ <el-radio-button v-for="item in userbtns" :key="item.key" :value="item.key">{{ item.name }}</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6" v-for="item in userReview" :key="item.key">
|
|
|
+ <el-statistic :value="data[item.key]">
|
|
|
+ <template #title>
|
|
|
+ <div>
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card shadow="never">
|
|
|
+ <div class="card-header">
|
|
|
+ <h3 class="card-title">区县收入排名</h3>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" v-for="item in data.orgAmountVos" :key="item.key">
|
|
|
+ <div class="phStyle">
|
|
|
+ <div class="phStyle-left">{{ item.orgName }}:</div>
|
|
|
+ <div class="progress"><el-progress :percentage="(item.orderAmount/data.orgAmountVos[0].orderAmount) * 100">
|
|
|
+ <span>{{ item.orderAmount }}</span>
|
|
|
+ </el-progress></div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card shadow="never">
|
|
|
+ <div class="card-header">
|
|
|
+ <h3 class="card-title">区县订单总量排名</h3>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" v-for="item in data.orgOrderVos" :key="item.key">
|
|
|
+ <div class="phStyle">
|
|
|
+ <div class="phStyle-left">{{ item.orgName }}:</div>
|
|
|
+ <div class="progress"><el-progress :percentage="(item.orderTotal/data.orgOrderVos[0].orderTotal) * 100">
|
|
|
+ <span>{{ item.orderTotal }}</span>
|
|
|
+ </el-progress></div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup></script>
|
|
|
+<script setup>
|
|
|
+import { orderSummary, userSummary, orgRank } from '@/api/index'
|
|
|
+import { computed } from 'vue'
|
|
|
+import { onMounted } from 'vue'
|
|
|
+
|
|
|
+const queryKey = ref('')
|
|
|
+const userKey = ref(1)
|
|
|
+
|
|
|
+const queryparmasTimes = computed(() => {
|
|
|
+ if(queryKey.value === 'today'){
|
|
|
+ return getToday();
|
|
|
+ }
|
|
|
+ if(queryKey.value === 'yesterday'){
|
|
|
+ return getYesterday();
|
|
|
+ }
|
|
|
+ if(queryKey.value === 'week'){
|
|
|
+ return getThisWeek();
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+})
|
|
|
+
|
|
|
+const btns = [
|
|
|
+ {
|
|
|
+ name: '今日',
|
|
|
+ key: 'today'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '昨日',
|
|
|
+ key: 'yesterday'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '本周',
|
|
|
+ key: 'getThisWeek'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '全部',
|
|
|
+ key: ''
|
|
|
+ },
|
|
|
+]
|
|
|
+const userbtns = [
|
|
|
+ {
|
|
|
+ name: '用户',
|
|
|
+ key: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '志愿者',
|
|
|
+ key: 2
|
|
|
+ },
|
|
|
+]
|
|
|
+const orderReview = [
|
|
|
+ {
|
|
|
+ name: '订单总量',
|
|
|
+ key: 'orderTotal'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '取消单量',
|
|
|
+ key: 'orderCancelTotal'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '总金额',
|
|
|
+ key: 'orderTotalAmount'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '完成单量',
|
|
|
+ key: 'orderFinishTotal '
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+const userReview = [
|
|
|
+ {
|
|
|
+ name: '用户总量',
|
|
|
+ key: 'userTotal'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '今日新增',
|
|
|
+ key: 'todayAdd'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '昨日新增',
|
|
|
+ key: 'yesterdayAdd'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '本月新增',
|
|
|
+ key: 'monthAdd'
|
|
|
+ },
|
|
|
+]
|
|
|
+const getToday = () => {
|
|
|
+ const today = new Date();
|
|
|
+ today.setHours(0, 0, 0, 0); // 设置为当天的零点
|
|
|
+ return today;
|
|
|
+};
|
|
|
+
|
|
|
+const getYesterday = () => {
|
|
|
+ const yesterday = new Date();
|
|
|
+ yesterday.setDate(yesterday.getDate() - 1);
|
|
|
+ yesterday.setHours(0, 0, 0, 0); // 设置为昨天的零点
|
|
|
+ return yesterday;
|
|
|
+};
|
|
|
+
|
|
|
+const getThisWeek = () => {
|
|
|
+ const today = new Date();
|
|
|
+ const dayOfWeek = today.getDay(); // 获取今天的星期几（0-6，0是周日）
|
|
|
+ const diffToMonday = today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1); // 计算到周一的天数差值
|
|
|
+ const monday = new Date(today);
|
|
|
+ monday.setDate(diffToMonday);
|
|
|
+ monday.setHours(0, 0, 0, 0); // 设置为本周一的零点
|
|
|
+ return monday;
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+const data = ref({
|
|
|
+ order: 388
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+const init = async () => {
|
|
|
+ try {
|
|
|
+ const parmas = {
|
|
|
+ startDate:queryparmasTimes.value
|
|
|
+ }
|
|
|
+ const res1 = await orderSummary(parmas)
|
|
|
+ const res2 = await userSummary({...parmas,userType: userKey.value})
|
|
|
+ const res3 = await orgRank({})
|
|
|
+ data.value = {
|
|
|
+ ...res1.data,
|
|
|
+ ...res2.data,
|
|
|
+ ...res3.data,
|
|
|
+ }
|
|
|
+ console.log('data.value');
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ init()
|
|
|
+})
|
|
|
+
|
|
|
+</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.home-content {
|
|
|
padding: 24px;
|
|
|
}
|
|
|
+
|
|
|
+.card-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.phStyle {
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // flex-direction: column;
|
|
|
+ .phStyle-left {
|
|
|
+ // width: 200px;
|
|
|
+ // text-align: right;
|
|
|
+ }
|
|
|
+ .progress {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.el-statistic {
|
|
|
+ --el-statistic-content-font-size: 28px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.statistic-card {
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: var(--el-bg-color-overlay);
|
|
|
+}
|
|
|
+
|
|
|
+.statistic-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--el-text-color-regular);
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.statistic-footer .footer-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.statistic-footer .footer-item span:last-child {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.green {
|
|
|
+ color: var(--el-color-success);
|
|
|
+}
|
|
|
+
|
|
|
+.red {
|
|
|
+ color: var(--el-color-error);
|
|
|
+}
|
|
|
+.el-radio-group {
|
|
|
+ margin-bottom: 0px !important;
|
|
|
+}
|
|
|
</style>
|
chenjj