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

Conformance: backend update Conformance checker API, fix issues section layout.

Browse Source
This commit is contained in:
chiayin
2023-07-27 11:13:15 +08:00
parent a70a7a96f7
commit 765278bada
2 changed files with 46 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -99,39 +99,45 @@
</section> </section>
<!-- Issues group --> <!-- Issues group -->
<section> <section>
<p class="h2 text-base">Non-conformance Issues</p> <div v-if="data.issues == ''"></div>
<div class="flex gap-4 w-full" v-if="data.issues !== null"> <div v-else>
<!-- Issues chart --> <p class="h2 text-base">Non-conformance Issues</p>
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full" v-if="null"> <div class="flex gap-4 w-full">
<p class="h2 pl-2 flex justify-between items-center"> <!-- Issues chart -->
<span>Time Trend<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span> <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full" v-if="null">
<span class="text-2xl"><span class="text-cfm-secondary">3.89K</span>/38.9K</span> <p class="h2 pl-2 flex justify-between items-center">
</p> <span>Time Trend<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
</div> <span class="text-2xl"><span class="text-cfm-secondary">3.89K</span>/38.9K</span>
<!-- Issues list --> </p>
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full"> </div>
<p class="h2 pl-2 mb-2">Issue List</p> <!-- Issues list -->
<table class="text-sm min-w-full table-fixed"> <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
<tbody> <p class="h2 pl-2 mb-2">Issue List</p>
<tr v-for="(trace, key) in data.issues" :key="key"> <table class="text-sm min-w-full table-fixed" v-if="data.issues !== 'reset'">
<td class="p-2 pl-6 truncate max-w-0 w-1/3"> <tbody>
<span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.issue }} <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>
<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>
<td class="p-2 min-w-[96px] w-2/5"> <td class="p-2 text-right truncate">{{ trace.count }}</td>
<div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden"> <td class="p-2 text-center">{{ trace.ratio }}%</td>
<div class="h-full bg-primary" :style="trace.value"></div> <td class="p-2 text-center">
</div> <div class="btn btn-sm btn-c-primary cursor-pointer" @click="openMore(trace.no)">More</div>
</td> </td>
<td class="p-2 text-right truncate">{{ trace.count }}</td> </tr>
<td class="p-2 text-center">{{ trace.ratio }}%</td> </tbody>
<td class="p-2 text-center"> </table>
<div class="btn btn-sm btn-c-primary cursor-pointer" @click="openMore(trace.no)">More</div> </div>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</section> </section>
<MoreModal :issusModal="issusModal" @update:visible="issusModal = $event" :issueTraces="issueTraces" :issusNo="issusNo" ref="moreModal"></MoreModal> <MoreModal :issusModal="issusModal" @update:visible="issusModal = $event" :issueTraces="issueTraces" :issusNo="issusNo" ref="moreModal"></MoreModal>
</section> </section>
@@ -177,7 +183,7 @@ export default {
time: null, time: null,
tasks: null, tasks: null,
}, },
issues: null issues: 'reset'
}, },
isCoverPlate: false, isCoverPlate: false,
issusModal: false, issusModal: false,

15
src/components/Discover/Conformance/MoreModal.vue
View File

@@ -40,15 +40,15 @@
<p class="h2 mb-2 px-4">Trace #{{ showTraceId }}</p> <p class="h2 mb-2 px-4">Trace #{{ showTraceId }}</p>
<div class="h-52 w-full px-2 mb-2 border border-neutral-300 rounded"> <div class="h-52 w-full px-2 mb-2 border border-neutral-300 rounded">
<div class="h-full w-full"> <div class="h-full w-full">
<!-- <div id="cfmTrace" ref="cfmTrace" class="h-full min-w-full relative"></div> --> <div id="cfmTrace" ref="cfmTrace" class="h-full min-w-full relative"></div>
</div> </div>
</div> </div>
<div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)]"> <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)]">
<!-- <DataTable :value="caseData" showGridlines tableClass="text-sm" breakpoint="0"> <DataTable :value="caseData" showGridlines tableClass="text-sm" breakpoint="0">
<div v-for="(col, index) in columnData" :key="index"> <div v-for="(col, index) in columnData" :key="index">
<Column :field="col.field" :header="col.header" sortable></Column> <Column :field="col.field" :header="col.header" sortable></Column>
</div> </div>
</DataTable> --> </DataTable>
<!-- <infinite-loading @infinite="infiniteHandler"></infinite-loading> --> <!-- <infinite-loading @infinite="infiniteHandler"></infinite-loading> -->
<!-- <div v-if="!maxItems">Loading more...</div> <!-- <div v-if="!maxItems">Loading more...</div>
<div v-else>No more data available.</div> --> <div v-else>No more data available.</div> -->
@@ -85,9 +85,6 @@ export default {
}, },
} }
}, },
// directives: {
// infiniteScroll, // 注册 vue-infinite-scroll 指令
// },
computed: { computed: {
traceTotal: function() { traceTotal: function() {
return this.traceList.length; return this.traceList.length;
@@ -230,3 +227,9 @@ export default {
}, },
} }
</script> </script>
<style scoped>
/* 進度條顏色 */
:deep(.p-progressbar .p-progressbar-value) {
@apply bg-primary
}
</style>