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">
<Slider v-model="selectArea" :step="1" :min="0" :max="selectRange" range class="mx-2" @change="changeSelectArea($event)"/>
</div>
<!-- Calendar / InputNumber group -->
<div>
<!-- Calendar group -->
<div v-if="selectedAttName.type === 'date'" class="flex justify-center items-center space-x-2 w-full">
<div>
<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>
<span class="block mt-4">~</span>
<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"/>
</div>
</div>
<!-- InputNumber group -->
<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" @blur="sliderValueRange($event, 'start')"></InputNumber>
<div v-else class="flex justify-center items-center space-x-2 w-full">
<InputNumber v-model="valueStart" :min="valueStartMin" :max="valueStartMax" :maxFractionDigits="2" inputClass="w-24 text-sm text-right" @blur="sliderValueRange($event, 'start')"></InputNumber>
<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>
@@ -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;