imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Map Attributes: API Format converter.

Browse Source
This commit is contained in:
chiayin
2023-10-30 16:10:37 +08:00
parent 03442f1934
commit fdba0abc37
3 changed files with 69 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/Discover/Map/Filter/Attributes.vue
View File

@@ -65,12 +65,12 @@
<div class="px-2 py-3"> <div class="px-2 py-3">
<Slider v-model="selectArea" :step="1" :min="0" :max="selectRange" range class="mx-2" @change="changeSelectArea($event)"/> <Slider v-model="selectArea" :step="1" :min="0" :max="selectRange" range class="mx-2" @change="changeSelectArea($event)"/>
</div> </div>
<!-- Calendar / InputNumber group -->
<div> <div>
<!-- Calendar group -->
<div v-if="selectedAttName.type === 'date'" class="flex justify-center items-center space-x-2 w-full"> <div v-if="selectedAttName.type === 'date'" class="flex justify-center items-center space-x-2 w-full">
<div> <div>
<span class="block mb-2">Start time</span> <span class="block mb-2">Start time</span>
<Calendar v-model="startTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="startMinDate" :maxDate="startMaxDate" showTime showIcon hourFormat="24" @date-select="sliderTimeRange($event, 'start')" id="startCalendar" /> <Calendar v-model="startTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="startMinDate" :maxDate="startMaxDate" showTime showIcon hourFormat="24" @date-select="sliderValueRange($event, 'start')" id="startCalendar" />
</div> </div>
<span class="block mt-4">~</span> <span class="block mt-4">~</span>
<div> <div>
@@ -78,11 +78,11 @@
<Calendar v-model="endTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="endMinDate" :maxDate="endMaxDate" showTime showIcon hourFormat="24" @date-select="sliderValueRange($event, 'end')" id="endCalendar"/> <Calendar v-model="endTime" dateFormat="yy/mm/dd" :panelProps="panelProps" :minDate="endMinDate" :maxDate="endMaxDate" showTime showIcon hourFormat="24" @date-select="sliderValueRange($event, 'end')" id="endCalendar"/>
</div> </div>
</div> </div>
<!-- InputNumber group --> <div v-else class="flex justify-center items-center space-x-2 w-full">
<div v-else class="flex justify-center items-center space-x-2 w-full w-"> <InputNumber v-model="valueStart" :min="valueStartMin" :max="valueStartMax" :maxFractionDigits="2" inputClass="w-24 text-sm text-right" @blur="sliderValueRange($event, 'start')"></InputNumber>
<InputNumber v-model="valueStart" :min="valueStartMin" :max="valueStartMax" :maxFractionDigits="2" inputClass="w-24 text-sm" @blur="sliderValueRange($event, 'start')"></InputNumber>
<span class="block px-2">~</span> <span class="block px-2">~</span>
<InputNumber v-model="valueEnd" :min="valueEndMin" :max="valueEndMax" :maxFractionDigits="2" inputClass="w-24 text-sm" @blur="sliderValueRange($event, 'end')"></InputNumber> <InputNumber v-model="valueEnd" :min="valueEndMin" :max="valueEndMax" inputClass="w-24 text-sm text-right" :maxFractionDigits="2" @blur="sliderValueRange($event, 'end')"></InputNumber>
<!-- :maxFractionDigits="2" -->
</div> </div>
</div> </div>
</div> </div>
@@ -209,15 +209,17 @@ export default {
sliderData: function() { sliderData: function() {
let xAxisMin; let xAxisMin;
let xAxisMax; let xAxisMax;
let min = this.valueData.min;
let max = this.valueData.max;
const type = this.valueData.type; const type = this.valueData.type;
switch (type) { switch (type) {
case 'date': case 'date':
xAxisMin = new Date(this.valueData.chart.x_axis.min).getTime(); xAxisMin = new Date(min).getTime();
xAxisMax = new Date(this.valueData.chart.x_axis.max).getTime(); xAxisMax = new Date(max).getTime();
break; break;
default: default:
xAxisMin = Math.round(this.valueData.chart.x_axis.min); xAxisMin = min;
xAxisMax = Math.round(this.valueData.chart.x_axis.max); xAxisMax = max;
break; break;
} }
let range = xAxisMax - xAxisMin; let range = xAxisMax - xAxisMin;
@@ -232,7 +234,7 @@ export default {
sliderData = sliderData.map(value => Math.round(value)); sliderData = sliderData.map(value => Math.round(value));
break; break;
case 'float': case 'float':
sliderData = sliderData.map(value => new Decimal(value.toFixed(2))); sliderData = sliderData.map(value => new Decimal(value.toFixed(2)).toNumber());
break; break;
default: default:
break; break;
@@ -245,8 +247,8 @@ export default {
let end; let end;
switch (this.selectedAttName.type) { switch (this.selectedAttName.type) {
case 'date': case 'date':
start = getMoment(this.startTime).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:ss'); end = getMoment(this.endTime).format('YYYY-MM-DDTHH:mm:00');
break; break;
default: default:
start = this.valueStart; start = this.valueStart;
@@ -276,13 +278,13 @@ export default {
this.valueStart = null; this.valueStart = null;
this.valueEnd = null; this.valueEnd = null;
// 初始化: Calendar // 初始化: Calendar
this.startMinDate = new Date(getMoment(min).format()); this.startMinDate = new Date(min);
this.startMaxDate = new Date(getMoment(max).format()); this.startMaxDate = new Date(max);
this.endMinDate = new Date(getMoment(min).format()); this.endMinDate = new Date(min);
this.endMaxDate = new Date(getMoment(max).format()); this.endMaxDate = new Date(max);
// 初始化: 讓日曆的範圍等於時間軸的範圍 // 初始化: 讓日曆的範圍等於時間軸的範圍
this.startTime = min; this.startTime = new Date(min);
this.endTime = max; this.endTime = new Date(max);
break; break;
default: default:
// date 雙向綁定為空 // date 雙向綁定為空
@@ -488,6 +490,7 @@ export default {
let sliderData = this.sliderData; let sliderData = this.sliderData;
let isDateType = this.selectedAttName.type === 'date'; let isDateType = this.selectedAttName.type === 'date';
let targetTime = []; let targetTime = [];
let inputValue;
if(isDateType) targetTime = [new Date(this.attValueTypeStartEnd[0]).getTime(), new Date(this.attValueTypeStartEnd[1]).getTime()]; if(isDateType) targetTime = [new Date(this.attValueTypeStartEnd[0]).getTime(), new Date(this.attValueTypeStartEnd[1]).getTime()];
else targetTime = [this.attValueTypeStartEnd[0], this.attValueTypeStartEnd[1]] else targetTime = [this.attValueTypeStartEnd[0], this.attValueTypeStartEnd[1]]
@@ -502,13 +505,9 @@ export default {
// 改變滑塊 // 改變滑塊
this.selectArea = closestIndexes; this.selectArea = closestIndexes;
// 重新設定 start end 日曆選取範圍 // 重新設定 start end 日曆選取範圍
let inputValue = Number(e.value.replace(/,/g, '')) ; if(!isDateType) inputValue = Number(e.value.replace(/,/g, '')) ;
if(direction === 'start') { if(direction === 'start') isDateType ? this.endMinDate = e : this.valueEndMin = inputValue;
isDateType ? this.endMinDate = e : this.valueEndMin = inputValue; else if(direction === 'end') isDateType ? this.startMaxDate = e : this.valueStartMax = inputValue;
}
else if(direction === 'end') {
isDateType ? this.endMinDate = e : this.valueStartMax = inputValue;
}
// 重新算圖 // 重新算圖
if(!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1])) this.resizeMask(this.chartComplete); if(!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1])) this.resizeMask(this.chartComplete);
else return; else return;

44
src/stores/allMapData.js
View File

@@ -1,6 +1,7 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import moment from "moment"; import moment from "moment";
import apiError from '@/module/apiError.js'; import apiError from '@/module/apiError.js';
import { Decimal } from 'decimal.js';
export default defineStore('allMapDataStore', { export default defineStore('allMapDataStore', {
state: () => ({ state: () => ({
@@ -95,7 +96,25 @@ export default defineStore('allMapDataStore', {
return state.allFilterTrace; return state.allFilterTrace;
}, },
filterAttrs: state => { 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 => { allFunnels: state => {
return state.allFunnelData; return state.allFunnelData;
@@ -173,8 +192,8 @@ export default defineStore('allMapDataStore', {
this.allTraceTaskSeq = response.data.task_seq; this.allTraceTaskSeq = response.data.task_seq;
this.allCase = response.data.cases; this.allCase = response.data.cases;
this.allCase.map(c => { this.allCase.map(c => {
c.started_at = moment(c.started_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.completed_at = moment(c.completed_at).format('YYYY-MM-DD HH:mm');
return this.allCase; return this.allCase;
}); });
return this.allCase; return this.allCase;
@@ -197,8 +216,8 @@ export default defineStore('allMapDataStore', {
this.allBaseTraceTaskSeq = response.data.task_seq; this.allBaseTraceTaskSeq = response.data.task_seq;
this.allBaseCase = response.data.cases; this.allBaseCase = response.data.cases;
this.allBaseCase.map(c => { this.allBaseCase.map(c => {
c.started_at = moment(c.started_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.completed_at = moment(c.completed_at).format('YYYY-MM-DD HH:mm');
return this.allBaseCase; return this.allBaseCase;
}); });
return this.allBaseCase; return this.allBaseCase;
@@ -222,6 +241,21 @@ export default defineStore('allMapDataStore', {
this.allFilterTimeframe = response.data.timeframe; this.allFilterTimeframe = response.data.timeframe;
this.allFilterTrace = response.data.trace; this.allFilterTrace = response.data.trace;
this.allFilterAttrs = response.data.attrs; 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) { } catch(error) {
apiError(error, 'Failed to load the Filter Parameters.'); apiError(error, 'Failed to load the Filter Parameters.');
}; };

10
src/stores/conformance.js
View File

@@ -112,8 +112,8 @@ export default defineStore('conformanceStore', {
cases: state => { cases: state => {
if(state.allCases !== null){ if(state.allCases !== null){
const newData = state.allCases.map(c => { const newData = state.allCases.map(c => {
c.started_at = moment(c.started_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.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:mm');
c.facets.map(fac => { c.facets.map(fac => {
switch(fac.type) { switch(fac.type) {
case 'duration-list': case 'duration-list':
@@ -153,12 +153,12 @@ export default defineStore('conformanceStore', {
loopCases: state => { loopCases: state => {
if(state.allLoopCases !== null){ if(state.allLoopCases !== null){
const newData = state.allLoopCases.map(c => { const newData = state.allLoopCases.map(c => {
c.started_at = moment(c.started_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.completed_at = moment(c.completed_at).format('YYYY/MM/DD HH:mm');
c.attributes.map(att => { c.attributes.map(att => {
switch (att.type) { switch (att.type) {
case 'date': 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; break;
case 'float': case 'float':
att.value = att.value !== null ? new Decimal(att.value).toFixed(2) : null; att.value = att.value !== null ? new Decimal(att.value).toFixed(2) : null;