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

feat: Compare Dashboard API done.

Browse Source
This commit is contained in:
chiayin
2024-02-20 12:44:30 +08:00
parent 01b8a95485
commit 795480ee89
6 changed files with 95 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/views/Compare/Dashboard/index.vue
View File

@@ -100,20 +100,20 @@
<script>
import { storeToRefs } from 'pinia';
import LoadingStore from '@/stores/loading.js';
import PerformanceStore from '@/stores/performance.js';
import CompareStore from '@/stores/compare.js';
import SidebarStates from '@/components/Compare/SidebarStates.vue';
import { setLineChartData } from '@/module/setChartData.js';
import { simpleTimeLabel, followTimeLabel, dateLabel } from '@/module/timeLabel.js';
import { compareDashboardData } from '@/views/Compare/Dashboard/data.js';
// import { compareDashboardData } from '@/views/Compare/Dashboard/data.js';
export default {
setup() {
const loadingStore = LoadingStore();
const performanceStore = PerformanceStore();
const compareStore = CompareStore();
const { isLoading } = storeToRefs(loadingStore);
const { performanceData } = storeToRefs(performanceStore);
const { compareDashboardData } = storeToRefs(compareStore);
return { isLoading, performanceStore, performanceData }
return { isLoading, compareStore, compareDashboardData }
},
components: {
SidebarStates,
@@ -625,33 +625,41 @@ export default {
},
async created() {
this.isLoading = true; // moubeted 才停止 loading
// log: 695977238 ; filter: 746150051
// [{"log_id":695977238},{"filter_id":746150051}]
// 要判斷資料有無 null,問貓貓是哪個階層 null?
// Activity 會有 0, null 的組合嗎?
// Activity 有 j, 無 j ?
// const routeParams = this.$route.params;
// console.log(routeParams);
// let id = routeParams.fileId;
// let type = routeParams.type;
const routeParams = this.$route.params;
const primaryType = routeParams.primaryType;
const secondaryType = routeParams.secondaryType;
const primaryId = routeParams.primaryId;
const secondaryId = routeParams.secondaryId;
const typeMap = {
'log': 'log_id',
'filter': 'filter_id'
};
const primaryTypeParam = typeMap[primaryType];
const secondaryTypeParam = typeMap[secondaryType];
const queryParams = [
{ [primaryTypeParam]: primaryId },
{ [secondaryTypeParam]: secondaryId }
];
// // 取得 Performance Data
// await this.performanceStore.getPerformance(type, id);
this.avgProcessTimeByTaskHeight = await this.getHorizontalBarHeight(compareDashboardData.time.avg_process_time_by_task);
this.avgWaitingTimeByEdgeHeight = await this.getHorizontalBarHeight(compareDashboardData.time.avg_waiting_time_by_edge);
this.casesByTaskHeight = await this.getHorizontalBarHeight(compareDashboardData.freq.cases_by_task);
// 取得 Compare Data
await this.compareStore.getCompare(queryParams);
this.avgProcessTimeByTaskHeight = await this.getHorizontalBarHeight(this.compareDashboardData.time.avg_process_time_by_task);
this.avgWaitingTimeByEdgeHeight = await this.getHorizontalBarHeight(this.compareDashboardData.time.avg_waiting_time_by_edge);
this.casesByTaskHeight = await this.getHorizontalBarHeight(this.compareDashboardData.freq.cases_by_task);
// create chart
[this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(compareDashboardData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);
[this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(compareDashboardData.time.avg_process_time, this.contentData.avgProcessTime);
[this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(compareDashboardData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true);
[this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(compareDashboardData.time.avg_waiting_time, this.contentData.avgWaitingTime);
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(compareDashboardData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false);
[this.freqData, this.freqOptions] = this.getLineChart(compareDashboardData.freq.cases, this.contentData.freq);
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true);
[this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(this.compareDashboardData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);
[this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_process_time, this.contentData.avgProcessTime);
[this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true);
[this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_waiting_time, this.contentData.avgWaitingTime);
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false);
[this.freqData, this.freqOptions] = this.getLineChart(this.compareDashboardData.freq.cases, this.contentData.freq);
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true);
},
mounted() {
// 停止 loading
this.isLoading = false;
},
}
}
</script>
<style scoped>