From 2dacef722a853d76bccb69bbed5a128ed9ce4bb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A2=A8=E5=A4=A7=E5=8F=94?= <494979559@qq.com> Date: Sat, 7 Sep 2024 16:43:25 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=8A=A5=E8=A1=A8=E6=9B=B4?= =?UTF-8?q?=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/system/dashboard.js | 9 ++ src/utils/index.js | 57 +++++++ src/views/dashboard/Brief.vue | 147 +++++++++--------- src/views/dashboard/DailyBillReport.vue | 33 ++-- src/views/dashboard/DailyHourBillChart.vue | 49 ++++++ src/views/dashboard/DailyProfitReport.vue | 92 ++++------- src/views/dashboard/ServiceIncomeChart.vue | 91 +++++++++++ .../dashboard/component/SmallLineChart.vue | 12 +- src/views/dashboard/component/TodoList.vue | 20 +-- src/views/ss/index/index.vue | 10 +- 10 files changed, 348 insertions(+), 172 deletions(-) create mode 100644 src/views/dashboard/DailyHourBillChart.vue create mode 100644 src/views/dashboard/ServiceIncomeChart.vue diff --git a/src/api/system/dashboard.js b/src/api/system/dashboard.js index 2b1dcc5..ea16bec 100644 --- a/src/api/system/dashboard.js +++ b/src/api/system/dashboard.js @@ -36,4 +36,13 @@ export function getTodoList() { }) } +// 获取服务费、月费等收入和渠道成本 +export function getServiceIncome(params) { + return request({ + url: '/system/dashboard/serviceIncome', + method: 'get', + params + }) +} + diff --git a/src/utils/index.js b/src/utils/index.js index 08b75d1..457f727 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -460,3 +460,60 @@ export function findLabel(options, value, prop = 'value', propLabel = 'label') { let obj = options.find(item => item[prop] === value); return obj == null ? null : obj[propLabel] } + +// 获取前n天的日期 +export function getLastDate(n) { + let now = new Date(); + return new Date(now.getTime() - n * 24 * 3600 * 1000) +} + +// 获取前n月的日期 +export function getLastMonth(n) { + const date = new Date(); + const year = date.getFullYear(); + const month = date.getMonth(); + const day = date.getDate(); + + // 减去 n 个月 + date.setMonth(month - n); + + // 确保日期不超过当月的最大天数 + const maxDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); + date.setDate(Math.min(day, maxDay)); + + return date; +} + +// 获取前n月的日期字符串 +export function getLastMonthDateStr(n) { + let date = getLastMonth(n); + return parseTime(date, "{y}-{m}-{d}") +} + +// 获取前n天的日期字符串 +export function getLastDateStr(n) { + let date = getLastDate(n); + return parseTime(date, "{y}-{m}-{d}"); +} + +// 获取前n天的日期时间字符串00:00:00 +export function getLastDateTimeStartStr(n) { + let date = getLastDate(n); + return parseTime(date, "{y}-{m}-{d} 00:00:00"); +} + +// 获取前n天的日期时间字符串23:59:59 +export function getLastDateTimeEndStr(n) { + let date = getLastDate(n); + return parseTime(date, "{y}-{m}-{d} 23:59:59"); +} + +// 获取前n天的日期时间00:00:00 +export function getLastDateTimeStart(n) { + return new Date(getLastDateTimeStartStr(n)); +} + +// 获取前n天的日期时间23:59:59 +export function getLastDateTimeEnd(n) { + return new Date(getLastDateTimeEndStr(n)); +} diff --git a/src/views/dashboard/Brief.vue b/src/views/dashboard/Brief.vue index 349d634..736277a 100644 --- a/src/views/dashboard/Brief.vue +++ b/src/views/dashboard/Brief.vue @@ -1,26 +1,26 @@ @@ -169,11 +168,11 @@ export default { }, // 订单数据 rechargeCountChartData() { - return this.parseToChart('rechargeCount', 'rechargeCount'); + return this.parseToChart('todayRechargeCount', 'todayRechargeCount'); }, // 订单金额数据 rechargeAmountChartData() { - return this.parseToChart('rechargeAmount', 'totalRecharge', 2); + return this.parseToChart('todayRechargeAmount', 'todayRechargeAmount', 2); }, // 月费数据 monthAmountChartData() { @@ -183,10 +182,14 @@ export default { userBalanceChartData() { return this.parseToChart('totalUserBalance', 'userBalance', 2); }, - // 设备数据 + // 用户设备数据 deviceChartData() { return this.parseToChart('deviceCount', 'totalDevice'); }, + // 总设备数据 + totalDeviceChartData() { + return this.parseToChart('totalDeviceCount', 'deviceCount'); + }, // 用户图表数据 peopleChartData() { if (this.briefData == null) { @@ -222,6 +225,7 @@ export default { this.getBriefData(); }, methods: { + // 转换为图表 parseToChart(currentProp, historyProp, fixed = 0) { if (this.briefData == null) { return [] @@ -238,9 +242,6 @@ export default { }) return list; }, - handleSetLineChartData(type) { - this.$emit('handleSetLineChartData', type) - }, // 获取舆情分析数据 getBriefData() { this.loading = true; diff --git a/src/views/dashboard/DailyBillReport.vue b/src/views/dashboard/DailyBillReport.vue index 238337c..8ce7dfc 100644 --- a/src/views/dashboard/DailyBillReport.vue +++ b/src/views/dashboard/DailyBillReport.vue @@ -6,9 +6,7 @@ import * as echarts from 'echarts' require('echarts/theme/macarons') // echarts theme import resize from './mixins/resize' -import {getTimeArray} from "@/utils"; -import {hourBillCount} from "@/api/system/dashboard"; -import {parseTime} from "@/utils/ruoyi"; +import { getTimeArray } from '@/utils' const animationDuration = 6000 @@ -27,23 +25,24 @@ export default { height: { type: String, default: '300px' + }, + billData: { + type: Array, + default: () => { + return [] + } } }, data() { return { loading: false, chart: null, - billData: [], // 记录统计数据 // x轴配置 x: { start: 0, end: 22, step: 2 }, - // 查询条件 - queryParams: { - createDate: parseTime(new Date(), "{y}-{m}-{d}") - } } }, watch: { @@ -56,9 +55,6 @@ export default { } } }, - created() { - this.getBillList(); - }, mounted() { this.$nextTick(() => { this.initChart() @@ -84,19 +80,10 @@ export default { data.filter(item => item.createHour >= i && item.createHour < i + this.x.step).forEach(item => { sum += item[key] == null ? 0 : item[key]; }) - list.push(sum); + list.push(sum.toFixed(2)); } return list; }, - // 获取分时记录统计 - getBillList() { - this.loading = true; - hourBillCount(this.queryParams).then(res => { - this.billData = res.data; - }).finally(() => { - this.loading = false; - }) - }, // 初始化图表 initChart() { this.chart = echarts.init(this.$el, 'macarons') @@ -132,7 +119,7 @@ export default { } }], series: [{ - name: '充值', + name: '充值（元）', type: 'bar', stack: 'vistors', barWidth: '30%', @@ -144,7 +131,7 @@ export default { } }, }, { - name: '提现', + name: '提现（元）', type: 'bar', stack: 'vistors', barWidth: '30%', diff --git a/src/views/dashboard/DailyHourBillChart.vue b/src/views/dashboard/DailyHourBillChart.vue new file mode 100644 index 0000000..4edc159 --- /dev/null +++ b/src/views/dashboard/DailyHourBillChart.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/src/views/dashboard/DailyProfitReport.vue b/src/views/dashboard/DailyProfitReport.vue index 5710ab3..f573abf 100644 --- a/src/views/dashboard/DailyProfitReport.vue +++ b/src/views/dashboard/DailyProfitReport.vue @@ -27,23 +27,24 @@ export default { height: { type: String, default: '300px' - } + }, + billData: { + type: Array, + default: () => { + return [] + } + }, }, data() { return { loading: false, chart: null, - billData: [], // 记录统计数据 // x轴配置 x: { start: 0, end: 22, step: 2 }, - // 查询条件 - queryParams: { - createDate: parseTime(new Date(), "{y}-{m}-{d}") - } } }, watch: { @@ -56,9 +57,6 @@ export default { } } }, - created() { - this.getBillList(); - }, mounted() { this.$nextTick(() => { this.initChart() @@ -72,30 +70,12 @@ export default { this.chart = null }, methods: { - // 获取分时数据 - getHourData(data, key) { + // 获取图表数据 + getChartData(data, key) { if (data == null) { return []; } - // 将数据分组求和 - let list = []; - for(let i = this.x.start; i <= this.x.end; i += this.x.step) { - let sum = 0; - data.filter(item => item.createHour >= i && item.createHour < i + this.x.step).forEach(item => { - sum += item[key] == null ? 0 : item[key]; - }) - list.push(sum); - } - return list; - }, - // 获取分时记录统计 - getBillList() { - this.loading = true; - hourBillCount(this.queryParams).then(res => { - this.billData = res.data; - }).finally(() => { - this.loading = false; - }) + return data.map(item => item[key]); }, // 初始化图表 initChart() { @@ -120,60 +100,52 @@ export default { }, xAxis: [{ type: 'category', - data: getTimeArray(this.x.start, this.x.end, this.x.step), + data: this.getChartData(this.billData, 'date'), axisTick: { alignWithLabel: true } }], - yAxis: [{ + yAxis:{ type: 'value', axisTick: { show: false } - }, { - name: '充值', - show: true - }], + }, series: [{ - name: '利润', + name: '月费收入（元）', type: 'bar', stack: 'vistors', - barWidth: '30%', - yAxisIndex: 0, - data: this.getHourData(this.billData, 'profit'), + barWidth: '50%', + data: this.getChartData(this.billData, 'monthAmount'), itemStyle: { normal: { color: '#246EFF', } }, }, { - name: '成本', + name: '服务费收入（元）', type: 'bar', stack: 'vistors', - barWidth: '30%', - yAxisIndex: 0, - data: this.getHourData(this.billData, 'channelCost'), - itemStyle: { - normal: { - color: '#81E2FF', - } - }, - }, { - name: '充值', - type: 'line', - stack: 'vistors', - barWidth: '30%', - yAxisIndex: 1, - data: this.getHourData(this.billData, 'recharge'), + barWidth: '50%', + data: this.getChartData(this.billData, 'serviceAmount'), itemStyle: { normal: { color: '#313CA9', - lineStyle: { - type: 'dashed' - } } }, - }] + },{ + name: '渠道成本（元）', + type: 'bar', + barWidth: '50%', + stack: 'vistors', + data: this.getChartData(this.billData, 'channelCost'), + itemStyle: { + normal: { + color: '#68bfe4', + } + }, + }, + ] }) } } diff --git a/src/views/dashboard/ServiceIncomeChart.vue b/src/views/dashboard/ServiceIncomeChart.vue new file mode 100644 index 0000000..b4cdde6 --- /dev/null +++ b/src/views/dashboard/ServiceIncomeChart.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/src/views/dashboard/component/SmallLineChart.vue b/src/views/dashboard/component/SmallLineChart.vue index 7f780df..2fca8dc 100644 --- a/src/views/dashboard/component/SmallLineChart.vue +++ b/src/views/dashboard/component/SmallLineChart.vue @@ -37,6 +37,14 @@ export default { color: { type: String, default: '#165DFF' + }, + type: { + type: String, + default: 'line' + }, + yAxisMin: { + type: String, + default: 'dataMin' } }, data() { @@ -91,14 +99,14 @@ export default { yAxis: { show: false, type: 'value', - min: 'dataMin', + min: this.yAxisMin, max: 'dataMax', }, series: [{ name: this.name, color: this.color, data: data.map(item => item.value), - type: 'line', + type: this.type, smooth: true }] }; diff --git a/src/views/dashboard/component/TodoList.vue b/src/views/dashboard/component/TodoList.vue index ee38aeb..d226557 100644 --- a/src/views/dashboard/component/TodoList.vue +++ b/src/views/dashboard/component/TodoList.vue @@ -1,19 +1,12 @@