refine performance code layout
This commit is contained in:
Cindy Chang
@@ -21,5 +21,19 @@ export default defineStore('conformanceDataStore', {
|
||||
setConformanceData(userInputObj){
|
||||
this.dataToSave = {...userInputObj};
|
||||
},
|
||||
/**
|
||||
* Set the starting time of time range to be saved later
|
||||
* @param {string} startStr
|
||||
*/
|
||||
setConformanceDataStart(startStr){
|
||||
this.dataToSave.start = startStr;
|
||||
},
|
||||
/**
|
||||
* Set the ending time of time range to be saved later
|
||||
* @param {string} startStr
|
||||
*/
|
||||
setConformanceDataEnd(endStr){
|
||||
this.dataToSave.end = endStr;
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -8,13 +8,21 @@
|
||||
<div>
|
||||
<p class="h1">Time Usage</p>
|
||||
<ul class="list-disc list-inside text-sm leading-5 pl-3">
|
||||
<li v-for="(item, index) in timeUsageData" :key="index" :class="{active: isActive === item.tagId}" @click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">{{ item.label }}</a></li>
|
||||
<li v-for="(item, index) in timeUsageData" :key="index" :class="{active: isActive === item.tagId}"
|
||||
@click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">
|
||||
{{ item.label }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p class="h1">Frequency</p>
|
||||
<ul class="list-disc list-inside text-sm leading-5 pl-3">
|
||||
<li v-for="(item, index) in frequencyData" :key="index" :class="{active: isActive === item.tagId}" @click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">{{ item.label }}</a></li>
|
||||
<li v-for="(item, index) in frequencyData" :key="index" :class="{active: isActive === item.tagId}"
|
||||
@click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">
|
||||
{{ item.label }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
@@ -22,7 +30,11 @@
|
||||
<!-- graph -->
|
||||
<article class="w-full h-full overflow-x-hidden overflow-y-auto scrollbar scroll-smooth">
|
||||
<section>
|
||||
<p class="h1 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">schedule</span>Time Usage</p>
|
||||
<p class="h1 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">
|
||||
schedule
|
||||
</span>
|
||||
Time Usage
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<ul class="list-disc list-inside px-4 pl-7 text-sm">
|
||||
@@ -30,11 +42,16 @@
|
||||
<span class="inline-block py-4">Cycle Time & Efficiency</span>
|
||||
<ul>
|
||||
<li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
|
||||
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgCycleTime.title }}</span>
|
||||
<span class="block font-bold text-sm leading-loose text-center my-2">
|
||||
{{ contentData.avgCycleTime.title }}
|
||||
</span>
|
||||
<Chart type="line" :data="avgCycleTimeData" :options="avgCycleTimeOptions" class="h-96" />
|
||||
</li>
|
||||
<li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
|
||||
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgCycleEfficiency.title }}<span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base" v-tooltip.bottom="tooltip.avgCycleEfficiency">info</span></span>
|
||||
<span class="block font-bold text-sm leading-loose text-center my-2">
|
||||
{{ contentData.avgCycleEfficiency.title }}
|
||||
<span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
|
||||
v-tooltip.bottom="tooltip.avgCycleEfficiency">info</span></span>
|
||||
<Chart type="bar" :data="avgCycleEfficiencyData" :options="avgCycleEfficiencyOptions" class="h-96" />
|
||||
</li>
|
||||
</ul>
|
||||
@@ -43,12 +60,17 @@
|
||||
<span class="inline-block py-4">Processing Time</span>
|
||||
<ul>
|
||||
<li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
|
||||
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgProcessTime.title }}</span>
|
||||
<span class="block font-bold text-sm leading-loose text-center my-2">
|
||||
{{ contentData.avgProcessTime.title }}
|
||||
</span>
|
||||
<Chart type="line" :data="avgProcessTimeData" :options="avgProcessTimeOptions" class="h-96" />
|
||||
</li>
|
||||
<li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
|
||||
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgProcessTimeByTask.title }}</span>
|
||||
<Chart type="bar" :data="avgProcessTimeByTaskData" :options="avgProcessTimeByTaskOptions" class="h-[500px]" :style="{ height: avgProcessTimeByTaskHeight }"/>
|
||||
<span class="block font-bold text-sm leading-loose text-center my-2">
|
||||
{{ contentData.avgProcessTimeByTask.title }}
|
||||
</span>
|
||||
<Chart type="bar" :data="avgProcessTimeByTaskData" :options="avgProcessTimeByTaskOptions" class="h-[500px]"
|
||||
:style="{ height: avgProcessTimeByTaskHeight }"/>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
@@ -56,13 +78,25 @@
|
||||
<span class="inline-block py-4">Waiting Time</span>
|
||||
<ul>
|
||||
<li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
|
||||
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTime.title }}<span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base" v-tooltip.bottom="tooltip.avgWaitingTime">info</span></span>
|
||||
<span class="block font-bold text-sm leading-loose text-center my-2">
|
||||
{{ contentData.avgWaitingTime.title }}
|
||||
<span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
|
||||
v-tooltip.bottom="tooltip.avgWaitingTime">
|
||||
info
|
||||
</span></span>
|
||||
<Chart type="line" :data="avgWaitingTimeData" :options="avgWaitingTimeOptions" class="h-96" />
|
||||
</li>
|
||||
<li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
|
||||
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTimeByEdge.title }}<span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base" v-tooltip.bottom="tooltip.avgWaitingTimeByEdge">info</span></span>
|
||||
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTimeByEdge.title }}
|
||||
<span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
|
||||
v-tooltip.bottom="tooltip.avgWaitingTimeByEdge">
|
||||
info
|
||||
</span>
|
||||
</span>
|
||||
<div>
|
||||
<Chart v-if="avgWaitingTimeByEdgeData !== null" type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" />
|
||||
<Chart v-if="avgWaitingTimeByEdgeData !== null" type="bar" :data="avgWaitingTimeByEdgeData"
|
||||
:options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }"
|
||||
class="h-[500px]" />
|
||||
<div v-else class="h-96 bg-neutral-100 m-4 flex">
|
||||
<p class="h2 text-danger m-auto">No waiting time.</p>
|
||||
</div>
|
||||
@@ -73,7 +107,11 @@
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<p class="h1 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">moving</span>Frequency</p>
|
||||
<p class="h1 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">
|
||||
moving
|
||||
</span>
|
||||
Frequency
|
||||
</p>
|
||||
<ul class="list-disc list-inside px-4 pl-7 text-sm">
|
||||
<li id="cases">
|
||||
<span class="inline-block py-4">Number of Cases</span>
|
||||
@@ -232,7 +270,8 @@ export default {
|
||||
|
||||
switch (yUnit) {
|
||||
case 'date':
|
||||
datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
|
||||
datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max,
|
||||
chartData.y_axis.min);
|
||||
xData = this.xLabelsData(chartData.x_axis);
|
||||
break;
|
||||
case 'count': // 次數 10 個點
|
||||
@@ -632,18 +671,25 @@ export default {
|
||||
}
|
||||
this.casesByTaskHeight = await this.getHorizontalBarHeight(this.performanceData.freq.cases_by_task);
|
||||
// create chart
|
||||
[this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(this.performanceData.time.avg_cycle_time, this.contentData.avgCycleTime, 'date');
|
||||
[this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(this.performanceData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);
|
||||
[this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.performanceData.time.avg_process_time, this.contentData.avgProcessTime, 'date');
|
||||
[this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true, 'date');
|
||||
[this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.performanceData.time.avg_waiting_time, this.contentData.avgWaitingTime, 'date');
|
||||
[this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(this.performanceData.time.avg_cycle_time,
|
||||
this.contentData.avgCycleTime, 'date');
|
||||
[this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(
|
||||
this.performanceData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);
|
||||
[this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.performanceData.time.avg_process_time,
|
||||
this.contentData.avgProcessTime, 'date');
|
||||
[this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(
|
||||
this.performanceData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true, 'date');
|
||||
[this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(
|
||||
this.performanceData.time.avg_waiting_time, this.contentData.avgWaitingTime, 'date');
|
||||
if(this.performanceData.time.avg_waiting_time_by_edge !== null) {
|
||||
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false, 'date');
|
||||
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(
|
||||
this.performanceData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false, 'date');
|
||||
} else {
|
||||
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = [null, null]
|
||||
}
|
||||
[this.freqData, this.freqOptions] = this.getLineChart(this.performanceData.freq.cases, this.contentData.freq, 'count');
|
||||
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.performanceData.freq.cases_by_task, this.contentData.casesByTask, true, 'count');
|
||||
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.performanceData.freq.cases_by_task,
|
||||
this.contentData.casesByTask, true, 'count');
|
||||
// 停止 loading
|
||||
this.isLoading = false;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user