Skip to content

phsl / admin

Go to a project
Commit 82a37154 by Jony.L
Options

首页统计4.0 改为按年、月、日统计

parent 0c1c1ff7
Showing with 29 additions and 26 deletions
src/views/Home/Index.vue
...@@ -64,13 +64,15 @@ ...@@ -64,13 +64,15 @@
<!-- 用户统计图表 --> <!-- 用户统计图表 -->
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12"> <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12">
<div style="display: flex; justify-content: flex-end; margin-bottom: 10px;"> <div style="display: flex; justify-content: flex-end; margin-bottom: 10px;">
<el-button <el-radio-group
@click="changeUserDateType" v-model="userDateType"
type="primary" @change="handleUserDateTypeChange"
size="small" size="small"
> >
{{ userDateType === 'd' ? '切换月数据' : '切换日数据' }} <el-radio label="d">日数据（近7天）</el-radio>
</el-button> <el-radio label="m">月数据（近30天）</el-radio>
<el-radio label="y">年数据（近12个月）</el-radio>
</el-radio-group>
</div> </div>
<el-card shadow="hover" class="mb-8px"> <el-card shadow="hover" class="mb-8px">
<el-skeleton :loading="loading" animated> <el-skeleton :loading="loading" animated>
...@@ -82,13 +84,15 @@ ...@@ -82,13 +84,15 @@
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12"> <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12">
<div style="display: flex; justify-content: flex-end; margin-bottom: 10px;"> <div style="display: flex; justify-content: flex-end; margin-bottom: 10px;">
<el-button <el-radio-group
@click="changeApiCallsDateType" v-model="apiCallsDateType"
type="primary" @change="handleApiCallsDateTypeChange"
size="small" size="small"
> >
{{ apiCallsDateType === 'd' ? '切换月数据' : '切换日数据' }} <el-radio label="d">日数据（近7天）</el-radio>
</el-button> <el-radio label="m">月数据（近30天）</el-radio>
<el-radio label="y">年数据（近12个月）</el-radio>
</el-radio-group>
</div> </div>
<el-card shadow="hover" class="mb-8px"> <el-card shadow="hover" class="mb-8px">
<el-skeleton :loading="loading" animated> <el-skeleton :loading="loading" animated>
...@@ -100,13 +104,15 @@ ...@@ -100,13 +104,15 @@
<!-- 第三个图表：折线图--> <!-- 第三个图表：折线图-->
<el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24"> <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
<div style="display: flex; justify-content: flex-end; margin-bottom: 10px;"> <div style="display: flex; justify-content: flex-end; margin-bottom: 10px;">
<el-button <el-radio-group
@click="changeOrderDateType" v-model="orderDateType"
type="primary" @change="handleOrderDateDateTypeChange"
size="small" size="small"
> >
{{ orderDateType === 'd' ? '切换月数据' : '切换日数据' }} <el-radio label="d">日数据（近7天）</el-radio>
</el-button> <el-radio label="m">月数据（近30天）</el-radio>
<el-radio label="y">年数据（近12个月）</el-radio>
</el-radio-group>
</div> </div>
<el-card shadow="hover" class="mb-8px"> <el-card shadow="hover" class="mb-8px">
<el-skeleton :loading="loading" animated> <el-skeleton :loading="loading" animated>
...@@ -125,7 +131,7 @@ ...@@ -125,7 +131,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {ref, reactive} from 'vue' import {reactive, ref} from 'vue'
import {EChartsOption} from 'echarts' import {EChartsOption} from 'echarts'
import {useUserStore} from '@/store/modules/user' import {useUserStore} from '@/store/modules/user'
...@@ -150,19 +156,16 @@ const userDateType = ref('d'); ...@@ -150,19 +156,16 @@ const userDateType = ref('d');
const apiCallsDateType = ref('d'); const apiCallsDateType = ref('d');
const orderDateType = ref('d'); const orderDateType = ref('d');
const changeUserDateType = () => { const handleUserDateTypeChange = () => {
userDateType.value = userDateType.value === 'd' ? 'm' : 'd';
// 调用获取图表数据的方法，传入当前类型
getUsersChartData(userDateType.value); getUsersChartData(userDateType.value);
// loading.value = true;
}; };
const changeApiCallsDateType = () => { const handleApiCallsDateTypeChange = () => {
apiCallsDateType.value = apiCallsDateType.value === 'd' ? 'm' : 'd';
getApiCallsChartData(apiCallsDateType.value); getApiCallsChartData(apiCallsDateType.value);
} }
const changeOrderDateType = () => { const handleOrderDateDateTypeChange = () => {
orderDateType.value = orderDateType.value === 'd' ? 'm' : 'd';
getOrderChartData(orderDateType.value); getOrderChartData(orderDateType.value);
} }
...@@ -304,7 +307,7 @@ const orderChartOptions = ref<EChartsOption>({ ...@@ -304,7 +307,7 @@ const orderChartOptions = ref<EChartsOption>({
data: [], // 算力金额数据 data: [], // 算力金额数据
type: 'line', type: 'line',
smooth: false, smooth: false,
itemStyle: { color: '#94D274' }, // 浅绿（和算力订单数颜色呼应） itemStyle: {color: '#94D274'}, // 浅绿（和算力订单数颜色呼应）
yAxisIndex: 1 // 关键：绑右侧金额轴 yAxisIndex: 1 // 关键：绑右侧金额轴
}, },
{ {
...@@ -312,7 +315,7 @@ const orderChartOptions = ref<EChartsOption>({ ...@@ -312,7 +315,7 @@ const orderChartOptions = ref<EChartsOption>({
data: [], // API金额数据 data: [], // API金额数据
type: 'line', type: 'line',
smooth: false, smooth: false,
itemStyle: { color: '#7CB6FF' }, // 浅蓝（和API订单数颜色呼应） itemStyle: {color: '#7CB6FF'}, // 浅蓝（和API订单数颜色呼应）
yAxisIndex: 1 // 绑右侧金额轴 yAxisIndex: 1 // 绑右侧金额轴
}, },
{ {
...@@ -320,7 +323,7 @@ const orderChartOptions = ref<EChartsOption>({ ...@@ -320,7 +323,7 @@ const orderChartOptions = ref<EChartsOption>({
data: [], // 总金额数据 data: [], // 总金额数据
type: 'line', type: 'line',
smooth: false, smooth: false,
itemStyle: { color: '#FFC53D' }, // 浅黄（和总订单数颜色呼应） itemStyle: {color: '#FFC53D'}, // 浅黄（和总订单数颜色呼应）
yAxisIndex: 1 // 绑右侧金额轴 yAxisIndex: 1 // 绑右侧金额轴
} }
] ]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment