From 3df97244e3339b9a8b71540768d138fc9c35dcf7 Mon Sep 17 00:00:00 2001 From: blp <2962632571@qq.com> Date: Fri, 3 Feb 2023 17:39:27 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BB=AA=E8=A1=A8=E7=9B=98=E3=80=81?= =?UTF-8?q?=E7=89=A9=E8=81=94=E5=8D=A1=E7=AE=A1=E7=90=86=E6=9F=A5=E7=9C=8B?= =?UTF-8?q?=20=E6=A0=B9=E6=8D=AE=E6=97=B6=E9=97=B4=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E6=B5=81=E9=87=8F=E5=9B=BE=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../iot-card/CardManagement/Detail/index.vue | 231 +++++++++++++-- src/views/iot-card/Dashboard/index.vue | 265 +++++++++++------- src/views/iot-card/components/Guide.vue | 7 +- src/views/iot-card/components/LineChart.vue | 2 +- src/views/iot-card/components/TimeSelect.vue | 120 ++++++++ 5 files changed, 493 insertions(+), 132 deletions(-) create mode 100644 src/views/iot-card/components/TimeSelect.vue diff --git a/src/views/iot-card/CardManagement/Detail/index.vue b/src/views/iot-card/CardManagement/Detail/index.vue index fffa20e5..580fe4df 100644 --- a/src/views/iot-card/CardManagement/Detail/index.vue +++ b/src/views/iot-card/CardManagement/Detail/index.vue @@ -13,21 +13,24 @@ {{ @@ -91,27 +94,82 @@ - +
- +
- - - - - + +
+
+
+
昨日流量消耗
+ + +
+ {{ dayTotal }} + M +
+ +
+ +
+
+
+
当月流量消耗
+ + +
+ {{ monthTotal }} + M +
+ +
+ +
+
+
+
本年流量消耗
+ + +
+ {{ yearTotal }} + M +
+ +
+ +
+
@@ -127,6 +185,8 @@ import { queryDetail } from '@/api/iot-card/cardManagement'; import Save from '../Save.vue'; import Guide from '@/views/iot-card/components/Guide.vue'; import LineChart from '@/views/iot-card/components/LineChart.vue'; +import { queryFlow } from '@/api/iot-card/home'; +import TimeSelect from '@/views/iot-card/components/TimeSelect.vue'; const route = useRoute(); @@ -136,6 +196,19 @@ const saveType = ref(''); const detail = ref({}); const flowData = ref([]); +const dayTotal = ref(0); +const monthTotal = ref(0); +const yearTotal = ref(0); +const dayOptions = ref([]); +const monthOptions = ref([]); +const yearOptions = ref([]); + +const quickBtnList = [ + { label: '昨日', value: 'yesterday' }, + { label: '近一周', value: 'week' }, + { label: '近一月', value: 'month' }, + { label: '近一年', value: 'year' }, +]; const getDetail = () => { queryDetail(route.params.id).then((resp: any) => { @@ -157,11 +230,123 @@ const saveChange = (val: any) => { } }; +const getData = ( + start: number, + end: number, +): Promise<{ sortArray: any[]; data: any[] }> => { + return new Promise((resolve) => { + queryFlow(start, end, { + orderBy: 'date', + }).then((resp: any) => { + if (resp.status === 200) { + const sortArray = resp.result.sort( + (a: any, b: any) => + new Date(a.date).getTime() - new Date(b.date).getTime(), + ); + resolve({ + sortArray, + data: sortArray.map( + (item: any) => item.value && item.value.toFixed(2), + ), + }); + } + }); + }); +}; + +/** + * 查询今日、当月、本年数据 + */ +const getDataTotal = () => { + const dTime = [ + moment(new Date()).startOf('day').valueOf(), + moment(new Date()).endOf('day').valueOf(), + ]; + const mTime = [ + moment().startOf('month').valueOf(), + moment().endOf('month').valueOf(), + ]; + const yTime = [ + moment().startOf('year').valueOf(), + moment().endOf('year').valueOf(), + ]; + getData(dTime[0], dTime[1]).then((resp) => { + dayTotal.value = resp.data + .reduce((r, n) => r + Number(n), 0) + .toFixed(2); + dayOptions.value = resp.sortArray; + }); + getData(mTime[0], mTime[1]).then((resp) => { + monthTotal.value = resp.data + .reduce((r, n) => r + Number(n), 0) + .toFixed(2); + monthOptions.value = resp.sortArray; + }); + getData(yTime[0], yTime[1]).then((resp) => { + yearTotal.value = resp.data + .reduce((r, n) => r + Number(n), 0) + .toFixed(2); + yearOptions.value = resp.sortArray; + }); +}; + +/** + * 流量统计 + * @param data + */ +const getEcharts = (data: any) => { + let startTime = data.start; + let endTime = data.end; + if (data.type === 'week' || data.type === 'month') { + startTime = moment(data.start).startOf('days').valueOf(); + endTime = moment(data.end).startOf('days').valueOf(); + } + getData(startTime, endTime).then((resp) => { + flowData.value = resp.sortArray; + }); +}; + getDetail(); +getDataTotal(); diff --git a/src/views/iot-card/Dashboard/index.vue b/src/views/iot-card/Dashboard/index.vue index 0f14238e..53516ce1 100644 --- a/src/views/iot-card/Dashboard/index.vue +++ b/src/views/iot-card/Dashboard/index.vue @@ -1,109 +1,145 @@ @@ -112,6 +148,8 @@ import Guide from '../components/Guide.vue'; import LineChart from '../components/LineChart.vue'; import moment from 'moment'; import { queryFlow } from '@/api/iot-card/home'; +import TimeSelect from '@/views/iot-card/components/TimeSelect.vue'; +import { Empty } from 'ant-design-vue'; const dayTotal = ref(0); const monthTotal = ref(0); @@ -124,6 +162,13 @@ const flowData = ref([]); const topList = ref([]); const topTotal = ref(0); +const quickBtnList = [ + { label: '昨日', value: 'yesterday' }, + { label: '近一周', value: 'week' }, + { label: '近一月', value: 'month' }, + { label: '近一年', value: 'year' }, +]; + const getData = ( start: number, end: number, @@ -189,12 +234,11 @@ const getDataTotal = () => { * @param data */ const getEcharts = (data: any) => { - console.log(data); - let startTime = data.time.start; - let endTime = data.time.end; - if (data.time.type === 'week' || data.time.type === 'month') { - startTime = moment(data.time.start).startOf('days').valueOf(); - endTime = moment(data.time.end).startOf('days').valueOf(); + let startTime = data.start; + let endTime = data.end; + if (data.type === 'week' || data.type === 'month') { + startTime = moment(data.start).startOf('days').valueOf(); + endTime = moment(data.end).startOf('days').valueOf(); } getData(startTime, endTime).then((resp) => { flowData.value = resp.sortArray; @@ -206,8 +250,10 @@ const getEcharts = (data: any) => { * @param star 开始时间 * @param end 结束时间 */ -const getTopRang = (star: number, end: number) => { - queryFlow(star, end, { orderBy: 'usage' }).then((resp: any) => { +const getTopRang = (data: any) => { + let startTime = data.start; + let endTime = data.end; + queryFlow(startTime, endTime, { orderBy: 'usage' }).then((resp: any) => { if (resp.status === 200) { const arr = resp.result .slice(0, 10) @@ -219,17 +265,9 @@ const getTopRang = (star: number, end: number) => { }; getDataTotal(); - -// getEcharts(data); - -const dTime = [ - moment().subtract(6, 'days').startOf('day').valueOf(), - moment().endOf('day').valueOf(), -]; -getTopRang(dTime[0], dTime[1]);