From fdba0abc37b72b89daec5e03ab403eab77ceaf0e Mon Sep 17 00:00:00 2001 From: chiayin Date: Mon, 30 Oct 2023 16:10:37 +0800 Subject: [PATCH] Map Attributes: API Format converter. --- .../Discover/Map/Filter/Attributes.vue | 51 +++++++++---------- src/stores/allMapData.js | 44 ++++++++++++++-- src/stores/conformance.js | 10 ++-- 3 files changed, 69 insertions(+), 36 deletions(-) diff --git a/src/components/Discover/Map/Filter/Attributes.vue b/src/components/Discover/Map/Filter/Attributes.vue index 9bdfb9b..4a9e8e8 100644 --- a/src/components/Discover/Map/Filter/Attributes.vue +++ b/src/components/Discover/Map/Filter/Attributes.vue @@ -65,12 +65,12 @@
+
-
Start time - +
~
@@ -78,11 +78,11 @@
- -
- +
+ ~ - + +
@@ -209,15 +209,17 @@ export default { sliderData: function() { let xAxisMin; let xAxisMax; + let min = this.valueData.min; + let max = this.valueData.max; const type = this.valueData.type; switch (type) { case 'date': - xAxisMin = new Date(this.valueData.chart.x_axis.min).getTime(); - xAxisMax = new Date(this.valueData.chart.x_axis.max).getTime(); + xAxisMin = new Date(min).getTime(); + xAxisMax = new Date(max).getTime(); break; default: - xAxisMin = Math.round(this.valueData.chart.x_axis.min); - xAxisMax = Math.round(this.valueData.chart.x_axis.max); + xAxisMin = min; + xAxisMax = max; break; } let range = xAxisMax - xAxisMin; @@ -232,7 +234,7 @@ export default { sliderData = sliderData.map(value => Math.round(value)); break; case 'float': - sliderData = sliderData.map(value => new Decimal(value.toFixed(2))); + sliderData = sliderData.map(value => new Decimal(value.toFixed(2)).toNumber()); break; default: break; @@ -245,8 +247,8 @@ export default { let end; switch (this.selectedAttName.type) { case 'date': - start = getMoment(this.startTime).format('YYYY-MM-DDTHH:mm:ss'); - end = getMoment(this.endTime).format('YYYY-MM-DDTHH:mm:ss'); + start = getMoment(this.startTime).format('YYYY-MM-DDTHH:mm:00'); + end = getMoment(this.endTime).format('YYYY-MM-DDTHH:mm:00'); break; default: start = this.valueStart; @@ -276,13 +278,13 @@ export default { this.valueStart = null; this.valueEnd = null; // 初始化: Calendar - this.startMinDate = new Date(getMoment(min).format()); - this.startMaxDate = new Date(getMoment(max).format()); - this.endMinDate = new Date(getMoment(min).format()); - this.endMaxDate = new Date(getMoment(max).format()); + this.startMinDate = new Date(min); + this.startMaxDate = new Date(max); + this.endMinDate = new Date(min); + this.endMaxDate = new Date(max); // 初始化: 讓日曆的範圍等於時間軸的範圍 - this.startTime = min; - this.endTime = max; + this.startTime = new Date(min); + this.endTime = new Date(max); break; default: // date 雙向綁定為空 @@ -488,6 +490,7 @@ export default { let sliderData = this.sliderData; let isDateType = this.selectedAttName.type === 'date'; let targetTime = []; + let inputValue; if(isDateType) targetTime = [new Date(this.attValueTypeStartEnd[0]).getTime(), new Date(this.attValueTypeStartEnd[1]).getTime()]; else targetTime = [this.attValueTypeStartEnd[0], this.attValueTypeStartEnd[1]] @@ -502,13 +505,9 @@ export default { // 改變滑塊 this.selectArea = closestIndexes; // 重新設定 start end 日曆選取範圍 - let inputValue = Number(e.value.replace(/,/g, '')) ; - if(direction === 'start') { - isDateType ? this.endMinDate = e : this.valueEndMin = inputValue; - } - else if(direction === 'end') { - isDateType ? this.endMinDate = e : this.valueStartMax = inputValue; - } + if(!isDateType) inputValue = Number(e.value.replace(/,/g, '')) ; + if(direction === 'start') isDateType ? this.endMinDate = e : this.valueEndMin = inputValue; + else if(direction === 'end') isDateType ? this.startMaxDate = e : this.valueStartMax = inputValue; // 重新算圖 if(!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1])) this.resizeMask(this.chartComplete); else return; diff --git a/src/stores/allMapData.js b/src/stores/allMapData.js index 5b10aff..cdb036c 100644 --- a/src/stores/allMapData.js +++ b/src/stores/allMapData.js @@ -1,6 +1,7 @@ import { defineStore } from "pinia"; import moment from "moment"; import apiError from '@/module/apiError.js'; +import { Decimal } from 'decimal.js'; export default defineStore('allMapDataStore', { state: () => ({ @@ -95,7 +96,25 @@ export default defineStore('allMapDataStore', { return state.allFilterTrace; }, filterAttrs: state => { - return state.allFilterAttrs; + if(state.allFilterAttrs !== null){ + state.allFilterAttrs.map(att => { + switch (att.type) { + case 'date': + att.min = att.min !== null ? moment(att.min).format('YYYY/MM/DD HH:mm') : null; + att.max = att.max !== null ? moment(att.max).format('YYYY/MM/DD HH:mm') : null; + break; + case 'float': + // Decimal.ROUND_UP|0: 無條件進位； Decimal.ROUND_DOWN|1: 無條件捨去。 + att.min = att.min !== null ? Number(new Decimal(att.min).toFixed(2, 0)) : null; + att.max = att.max !== null ? Number(new Decimal(att.max).toFixed(2, 1)) : null; + break + default: + break; + } + return att; + }); + return state.allFilterAttrs; + } }, allFunnels: state => { return state.allFunnelData; @@ -173,8 +192,8 @@ export default defineStore('allMapDataStore', { this.allTraceTaskSeq = response.data.task_seq; this.allCase = response.data.cases; this.allCase.map(c => { - c.started_at = moment(c.started_at).format('YYYY-MM-DD HH:MM'); - c.completed_at = moment(c.completed_at).format('YYYY-MM-DD HH:MM'); + c.started_at = moment(c.started_at).format('YYYY-MM-DD HH:mm'); + c.completed_at = moment(c.completed_at).format('YYYY-MM-DD HH:mm'); return this.allCase; }); return this.allCase; @@ -197,8 +216,8 @@ export default defineStore('allMapDataStore', { this.allBaseTraceTaskSeq = response.data.task_seq; this.allBaseCase = response.data.cases; this.allBaseCase.map(c => { - c.started_at = moment(c.started_at).format('YYYY-MM-DD HH:MM'); - c.completed_at = moment(c.completed_at).format('YYYY-MM-DD HH:MM'); + c.started_at = moment(c.started_at).format('YYYY-MM-DD HH:mm'); + c.completed_at = moment(c.completed_at).format('YYYY-MM-DD HH:mm'); return this.allBaseCase; }); return this.allBaseCase; @@ -222,6 +241,21 @@ export default defineStore('allMapDataStore', { this.allFilterTimeframe = response.data.timeframe; this.allFilterTrace = response.data.trace; this.allFilterAttrs = response.data.attrs; + // this.allFilterAttrs.map(att => { + // switch (att.type) { + // case 'date': + // att.min = att.min !== null ? moment(att.min).format('YYYY/MM/DD HH:mm:ss') : null; + // att.max = att.max !== null ? moment(att.max).format('YYYY/MM/DD HH:mm:ss') : null; + // break; + // case 'float': + // att.min = att.min !== null ? new Decimal(att.min).toFixed(2) : null; + // att.max = att.max !== null ? new Decimal(att.max).toFixed(2) : null; + // break + // default: + // break; + // } + // return att; + // }); } catch(error) { apiError(error, 'Failed to load the Filter Parameters.'); }; diff --git a/src/stores/conformance.js b/src/stores/conformance.js index c0db755..038cd8d 100644 --- a/src/stores/conformance.js +++ b/src/stores/conformance.js @@ -112,8 +112,8 @@ export default defineStore('conformanceStore', { cases: state => { if(state.allCases !== null){ const newData = state.allCases.map(c => { - c.started_at = moment(c.started_at).format('YYYY/MM/DD HH:MM'); - c.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:MM'); + c.started_at = moment(c.started_at).format('YYYY/MM/DD HH:mm'); + c.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:mm'); c.facets.map(fac => { switch(fac.type) { case 'duration-list': @@ -153,12 +153,12 @@ export default defineStore('conformanceStore', { loopCases: state => { if(state.allLoopCases !== null){ const newData = state.allLoopCases.map(c => { - c.started_at = moment(c.started_at).format('YYYY/MM/DD HH:MM'); - c.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:MM'); + c.started_at = moment(c.started_at).format('YYYY/MM/DD HH:mm'); + c.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:mm'); c.attributes.map(att => { switch (att.type) { case 'date': - att.value = att.value !== null ? moment(att.value).format('YYYY/MM/DD HH:MM:ss') : null; + att.value = att.value !== null ? moment(att.value).format('YYYY/MM/DD HH:mm:ss') : null; break; case 'float': att.value = att.value !== null ? new Decimal(att.value).toFixed(2) : null;