Skip to content

Commit

Permalink
update: total for data update
Browse files Browse the repository at this point in the history 
Signed-off-by: Arvin Huang <[email protected]>
  • Loading branch information
@idwenwen
idwenwen committed Feb 21, 2024
1 parent 413dd32 commit a613759
Showing 1 changed file with 155 additions and 155 deletions.
310 changes: 155 additions & 155 deletions resources-front-end/packages/fate-board/src/views/detail/Information/DataOutput.vue
View file
Original file line number Diff line number Diff line change
@@ -1,155 +1,155 @@
<template>
<section class="f-info-data-container">
<section class="f-info-data-header">
<article class="f-info-data-title">
Outputting {{ dataTotal[selected ? Number(selected) || 0 : 0] }} instance
<span>(only 100 instance are shown in the table)</span>
</article>
<FSelection
v-if="selections.length > 1"
v-model="selected"
:options="selections"
class="f-info-data-selection"
></FSelection>
</section>
<section class="f-info-data-body" :key="refresh">
<FTable
:header="dataTableHeader[selected ? Number(selected) || 0 : 0] || []"
:data="dataTableData[selected ? Number(selected) || 0 : 0] || []"
:column="true"
:index="true"
class="f-info-data-table"
></FTable>
</section>
</section>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const selections = ref<any>([]);
const selected = ref(selections.value[0] ? selections.value[0].value : '');
const dataTableHeader = ref<any>([]);
const dataTableData = ref<any>([]);
const dataTotal = ref([])
const refresh = ref(0)
const dataRequest = async () => {
try {
const response = await store.dispatch('dataOutput');
const { output_data } = response;
const options: any = [];
const tableHeader: any = [];
const tableData: any = [];
const total: any = []
if (output_data) {
for (let i = 0; i < output_data.length; i++) {
const each = output_data[i];
const { data, metadata } = each;
const { anonymous_summary, fields } = metadata.schema_meta;
options.push({
label: anonymous_summary.site_name,
value: i,
});
tableHeader.push(
(() => {
const list: any = [];
for (const item of fields) {
list.push({
label: item.name,
prop: item.name,
});
}
return list;
})()
);
tableData.push(
(() => {
const header = tableHeader[tableHeader.length - 1];
const list: any = [];
for (const item of data) {
const row: any = {};
for (let j = 0; j < header.length; j++) {
row[header[j].prop] = item[j];
}
list.push(row);
}
return list;
})()
);
total.push(tableData[tableData.length - 1].length)
}
}
selections.value = options;
dataTableHeader.value = tableHeader;
dataTableData.value = tableData;
dataTotal.value = total
} catch(err) {
dataTableHeader.value = []
dataTableData.value = []
dataTotal.value = []
}
refresh.value ++
};
watch(
() => selections.value,
() => {
selected.value = selections.value[0] ? selections.value[0].value : '';
},
{ deep: true }
);
watch(
() => store.state.comp.information,
() => {
dataRequest()
},
{ deep: true }
)
onMounted(async () => {
await dataRequest();
});
const refreshing = () => {
dataRequest()
}
defineExpose({
refresh: refreshing
})
</script>

<style lang="scss" scoped>
@import '@/style/index.scss';
.f-info-data-container {
@include box-stretch();
@include flex-col();
align-items: flex-start;
justify-content: flex-start;
.f-info-data-header {
width: 100%;
flex: 0 0 45px;
@include flex-row();
align-items: center;
justify-content: space-between;
margin-bottom: $pale;
}
.f-info-data-body {
position: relative;
width: 100%;
height: calc(100% - 45px);
flex: 1 1 auto;
overflow: hidden;
.f-info-data-table {
@include box-stretch();
}
}
}
</style>
<template>
<section class="f-info-data-container">
<section class="f-info-data-header">
<article class="f-info-data-title">
Outputting {{ dataTotal[selected ? Number(selected) || 0 : 0] }} instance
<span>(only 100 instance are shown in the table)</span>
</article>
<FSelection
v-if="selections.length > 1"
v-model="selected"
:options="selections"
class="f-info-data-selection"
></FSelection>
</section>
<section class="f-info-data-body" :key="refresh">
<FTable
:header="dataTableHeader[selected ? Number(selected) || 0 : 0] || []"
:data="dataTableData[selected ? Number(selected) || 0 : 0] || []"
:column="true"
:index="true"
class="f-info-data-table"
></FTable>
</section>
</section>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const selections = ref<any>([]);
const selected = ref(selections.value[0] ? selections.value[0].value : '');
const dataTableHeader = ref<any>([]);
const dataTableData = ref<any>([]);
const dataTotal = ref([])
const refresh = ref(0)
const dataRequest = async () => {
try {
const response = await store.dispatch('dataOutput');
const { output_data } = response;
const options: any = [];
const tableHeader: any = [];
const tableData: any = [];
const total: any = []
if (output_data) {
for (let i = 0; i < output_data.length; i++) {
const each = output_data[i];
const { data, metadata } = each;
const { anonymous_summary, fields } = metadata.schema_meta;
options.push({
label: anonymous_summary.site_name,
value: i,
});
tableHeader.push(
(() => {
const list: any = [];
for (const item of fields) {
list.push({
label: item.name,
prop: item.name,
});
}
return list;
})()
);
tableData.push(
(() => {
const header = tableHeader[tableHeader.length - 1];
const list: any = [];
for (const item of data) {
const row: any = {};
for (let j = 0; j < header.length; j++) {
row[header[j].prop] = item[j];
}
list.push(row);
}
return list;
})()
);
total.push(each.total)
}
}
selections.value = options;
dataTableHeader.value = tableHeader;
dataTableData.value = tableData;
dataTotal.value = total
} catch(err) {
dataTableHeader.value = []
dataTableData.value = []
dataTotal.value = []
}
refresh.value ++
};
watch(
() => selections.value,
() => {
selected.value = selections.value[0] ? selections.value[0].value : '';
},
{ deep: true }
);
watch(
() => store.state.comp.information,
() => {
dataRequest()
},
{ deep: true }
)
onMounted(async () => {
await dataRequest();
});
const refreshing = () => {
dataRequest()
}
defineExpose({
refresh: refreshing
})
</script>

<style lang="scss" scoped>
@import '@/style/index.scss';
.f-info-data-container {
@include box-stretch();
@include flex-col();
align-items: flex-start;
justify-content: flex-start;
.f-info-data-header {
width: 100%;
flex: 0 0 45px;
@include flex-row();
align-items: center;
justify-content: space-between;
margin-bottom: $pale;
}
.f-info-data-body {
position: relative;
width: 100%;
height: calc(100% - 45px);
flex: 1 1 auto;
overflow: hidden;
.f-info-data-table {
@include box-stretch();
}
}
}
</style>

0 comments on commit a613759

Please sign in to comment.