refine only layout of code
This commit is contained in:
Cindy Chang
@@ -8,13 +8,20 @@
|
||||
<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,17 +29,28 @@
|
||||
<!-- graph -->
|
||||
<article class="w-full h-full pr-2 mr-2 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>
|
||||
<ul class="list-disc list-inside px-4 pl-7 text-sm">
|
||||
<li id="cycleTime" class="scroll-smooth">
|
||||
<span class="inline-block py-4">Cycle 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>
|
||||
@@ -41,12 +59,17 @@
|
||||
<span class="inline-block py-4 text-sm">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>
|
||||
@@ -54,13 +77,22 @@
|
||||
<span class="inline-block py-4 text-sm">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>
|
||||
@@ -71,7 +103,11 @@
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<p class="h1 px-4 border-b border-neutral-900 mt-2"><span class="material-symbols-outlined mr-2 align-middle">moving</span>Frequency</p>
|
||||
<p class="h1 px-4 border-b border-neutral-900 mt-2"><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>
|
||||
@@ -81,8 +117,11 @@
|
||||
<Chart type="line" :data="freqData" :options="freqOptions" 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.casesByTask.title }}</span>
|
||||
<Chart type="bar" :data="casesByTaskData" :options="casesByTaskOptions" :style="{ height: casesByTaskHeight }" class="h-[500px]"/>
|
||||
<span class="block font-bold text-sm leading-loose text-center my-2">
|
||||
{{ contentData.casesByTask.title }}
|
||||
</span>
|
||||
<Chart type="bar" :data="casesByTaskData" :options="casesByTaskOptions" :style="{ height: casesByTaskHeight }"
|
||||
class="h-[500px]"/>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
@@ -92,8 +131,11 @@
|
||||
<!-- Sidebar: State -->
|
||||
<div class="bg-transparent z-10">
|
||||
<ul class="flex flex-col justify-center items-center">
|
||||
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" :class="{'border-primary': sidebarState}" id="compareState">
|
||||
<span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
|
||||
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9
|
||||
cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState"
|
||||
:class="{'border-primary': sidebarState}" id="compareState">
|
||||
<span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
|
||||
:class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
|
||||
info
|
||||
</span>
|
||||
</li>
|
||||
@@ -243,8 +285,10 @@ export default {
|
||||
|
||||
switch (yUnit) {
|
||||
case 'date':
|
||||
datasetsPrimary = setLineChartData(chartData.data[0].data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
|
||||
datasetsSecondary = setLineChartData(chartData.data[1].data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
|
||||
datasetsPrimary = setLineChartData(chartData.data[0].data, chartData.x_axis.max, chartData.x_axis.min, false,
|
||||
chartData.y_axis.max, chartData.y_axis.min);
|
||||
datasetsSecondary = setLineChartData(chartData.data[1].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 個點
|
||||
@@ -750,18 +794,28 @@ export default {
|
||||
};
|
||||
this.casesByTaskHeight = await this.getHorizontalBarHeight(this.compareDashboardData.freq.cases_by_task);
|
||||
// create chart
|
||||
[this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_cycle_time, this.contentData.avgCycleTime, 'date');
|
||||
[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, 'date');
|
||||
[this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true, 'date');
|
||||
[this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_waiting_time, this.contentData.avgWaitingTime, 'date');
|
||||
[this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(
|
||||
this.compareDashboardData.time.avg_cycle_time, this.contentData.avgCycleTime, 'date');
|
||||
[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, 'date');
|
||||
[this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(
|
||||
this.compareDashboardData.time.avg_process_time_by_task,
|
||||
this.contentData.avgProcessTimeByTask, true, 'date');
|
||||
[this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(
|
||||
this.compareDashboardData.time.avg_waiting_time, this.contentData.avgWaitingTime, 'date');
|
||||
if(this.compareDashboardData.time.avg_waiting_time_by_edge !== null) {
|
||||
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false, 'date');
|
||||
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(
|
||||
this.compareDashboardData.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.compareDashboardData.freq.cases, this.contentData.freq, 'count');
|
||||
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true, 'count');
|
||||
[this.freqData, this.freqOptions] = this.getLineChart(
|
||||
this.compareDashboardData.freq.cases, this.contentData.freq, 'count');
|
||||
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(
|
||||
this.compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true, 'count');
|
||||
},
|
||||
mounted() {
|
||||
// 停止 loading
|
||||
|
||||
Reference in New Issue
Block a user