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

Conformance: Activity sequence Short loop(s) done.

Browse Source
This commit is contained in:
chiayin
2023-08-15 10:31:55 +08:00
parent 8f1711de99
commit 82f18ee5e4
4 changed files with 193 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/Discover/Conformance/ConformanceResults.vue
View File

@@ -1,6 +1,5 @@
<template>
<section class="p-4 mr-0.5 space-y-2 h-full w-[calc(100vw_-_316px)] overflow-y-auto scrollbar float-right">
<!-- cover plate -->
<section class="p-4 mr-0.5 space-y-2 h-full w-[calc(100vw_-_316px)] overflow-y-auto scrollbar float-right">
<div v-show="isCoverPlate" class="w-[calc(100vw_-_300px)] h-screen-main fixed bottom-0 right-0 bg-gradient-to-tr from-neutral-500/50 to-neutral-900/50 z-[1]">
</div>
<!-- title -->
@@ -97,9 +96,38 @@
</div>
</div>
</section>
<!-- Loop group -->
<section>
<div v-if="data.loops == null"></div>
<div v-else>
<p class="h2 text-base">Loop List</p>
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
<p class="h2 pl-2 mb-2">Short Loop(s)</p>
<table class="text-sm min-w-full table-fixed">
<tbody>
<tr v-for="(trace, key) in data.loops" :key="key">
<td class="p-2 pl-6 truncate max-w-0 w-1/3">
<span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.label }}
</td>
<td class="p-2 min-w-[96px] w-2/5">
<div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
<div class="h-full bg-primary" :style="trace.value"></div>
</div>
</td>
<td class="p-2 text-right truncate">{{ trace.count }}</td>
<td class="p-2 text-center">{{ trace.ratio }}%</td>
<td class="p-2 text-center">
<div class="btn btn-sm btn-c-primary cursor-pointer" @click="openLoopMore(trace.no)">More</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Issues group -->
<section>
<div v-if="data.issues == ''"></div>
<div v-if="data.issues == null"></div>
<div v-else>
<p class="h2 text-base">Non-conformance Issues</p>
<div class="flex gap-4 w-full">
@@ -117,8 +145,8 @@
<tbody>
<tr v-for="(trace, key) in data.issues" :key="key">
<td class="p-2 pl-6 truncate max-w-0 w-1/3">
<span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.issue }}
</td>
<span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.label }}
</td>
<td class="p-2 min-w-[96px] w-2/5">
<div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
<div class="h-full bg-primary" :style="trace.value"></div>
@@ -136,7 +164,8 @@
</div>
</div>
</section>
<MoreModal :issusModal="issusModal" @update:visible="issusModal = $event" :issueTraces="issueTraces" :issusNo="issusNo" :traceId="traceId" :firstCases="firstCases" ref="moreModal"></MoreModal>
<MoreModal :listModal="issuesModal" @update:visible="issusModal = $event" :listTraces="issueTraces" :taskSeq="taskSeq" :cases="cases" :listNo="issuesNo" :traceId="traceId" :firstCases="firstCases" :category="'issue'"></MoreModal>
<MoreModal :listModal="loopModal" @update:visible="loopModal = $event" :listTraces="loopTraces" :taskSeq="loopTaskSeq" :cases="loopCases" :listNo="loopNo" :traceId="looptraceId" :firstCases="loopFirstCases" :category="'loop'"></MoreModal>
</section>
</template>
<script>
@@ -152,9 +181,9 @@ import getMoment from 'moment';
export default {
setup() {
const conformanceStore = ConformanceStore();
const { conformanceTempReportData, issueTraces, taskSeq, } = storeToRefs(conformanceStore);
const { conformanceTempReportData, issueTraces, taskSeq, cases, loopTraces, loopTaskSeq, loopCases } = storeToRefs(conformanceStore);
return { conformanceTempReportData, issueTraces, taskSeq, conformanceStore }
return { conformanceTempReportData, issueTraces, taskSeq, cases, loopTraces, loopTaskSeq, loopCases, conformanceStore }
},
data() {
return {
@@ -180,17 +209,22 @@ export default {
time: null,
tasks: null,
},
loops: null,
issues: 'reset'
},
isCoverPlate: false,
issusModal: false,
issuesModal: false,
loopModal: false,
rateChartData: null,
rateChartOptions: null,
casesChartData: null,
casesChartOptions: null,
issusNo: null,
issuesNo: null,
traceId: null,
firstCases: null,
loopNo: null,
looptraceId: null,
loopFirstCases: null,
tooltip: {
results: {
value: 'This page will perform a conformance check based on the filtering results of the map.',
@@ -208,7 +242,6 @@ export default {
watch: {
conformanceTempReportData: {
handler: function(newValue) {
// this.data = newValue;
this.data = this.setConformanceTempReportData(newValue);
},
}
@@ -238,14 +271,29 @@ export default {
convertSecToDay(sec) {
return (sec / 86400)
},
/**
* Open Issues Modal.
* @param {number} no trace no
*/
async openMore(no) {
// async await 解決非同步資料延遲傳遞導致未讀取到而出錯的問題
this.issusNo = no;
this.issuesNo = no;
await this.conformanceStore.getLogConformanceIssue(no);
this.traceId = await this.issueTraces[0].id;
this.firstCases = await this.conformanceStore.getLogConformanceTraceDetail(no, this.issueTraces[0].id, 0);
this.issusModal = await true;
await this.$refs.moreModal.createCy()
this.issuesModal = await true;
},
/**
* Open Loop Modal.
* @param {number} no trace no
*/
async openLoopMore(no) {
// async await 解決非同步資料延遲傳遞導致未讀取到而出錯的問題
this.loopNo = no;
await this.conformanceStore.getLogConformanceLoop(no);
this.looptraceId = await this.loopTraces[0].id;
this.loopFirstCases = await this.conformanceStore.getLogConformanceLoopsTraceDetail(no, this.loopTraces[0].id, 0);
this.loopModal = await true;
},
/**
* set conformance report data
@@ -256,6 +304,16 @@ export default {
let rate = ((data.counts.conforming / sum) * 100).toFixed(1);
let isNullTime = value => value === null ? null : getNumberLabel((value / 86400).toFixed(1));
let isNullCase = value => value === null ? null : getNumberLabel(value.toFixed(1));
let setListData = value => value.map(item => {
return {
no: item.no,
label: item.description,
value: `width:${this.getPercentLabel(item.count / sum)}%;`,
count: item.count,
ratio: this.getPercentLabel(item.count / sum),
}
});
let isNullLists = value => value === null ? null : setListData(value);
let result = {
counts: {
@@ -294,15 +352,8 @@ export default {
difference: isNullCase(data.effect.tasks.conforming - data.effect.tasks.not_conforming),
},
},
issues: data.issues.map(item => {
return {
no: item.no,
issue: item.description,
value: `width:${this.getPercentLabel(item.count / sum)}%;`,
count: item.count,
ratio: this.getPercentLabel(item.count / sum),
}
})
loops: isNullLists(data.loops),
issues: isNullLists(data.issues),
};
this.setRateChartData(result.charts.rate.data); // 建立圖表 Rate Chart.js
this.setCasesChartData(result.charts.cases.data.conforming, result.charts.cases.data.not_conforming, data.charts.cases.x_axis.max, data.charts.cases.x_axis.min); // 建立圖表 Cases Chart.js