Discover: sideBar trace done.
This commit is contained in:
chiayin
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<Sidebar :visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12">
|
||||
<Sidebar :visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12" @show="show()">
|
||||
<template #header>
|
||||
<p class="h1">Traces</p>
|
||||
</template>
|
||||
<div class="pt-4 h-full flex items-center justify-start">
|
||||
<!-- Trace List -->
|
||||
<section class="w-80 h-full pr-4 border-r border-neutral-300">
|
||||
<p class="h2 px-2 mb-2">Trace List (25)</p>
|
||||
<p class="h2 px-2 mb-2">Trace List ({{ traceTotal }})</p>
|
||||
<p class="text-primary h2 px-2 mb-2">
|
||||
<span class="material-symbols-outlined text-base align-[-10%] mr-2">info</span>Click trace number to see more.
|
||||
</p>
|
||||
@@ -19,13 +19,15 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-xs p-2">#365</td>
|
||||
<tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @dblclick="switchCaseData(trace.id)">
|
||||
<td class="text-xs p-2">#{{ trace.id }}</td>
|
||||
<td class="text-xs p-2 w-24">
|
||||
<ProgressBar :value="80" :showValue="false" class="!h-4"></ProgressBar>
|
||||
<div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
|
||||
<div class="h-full bg-primary" :style="progressWidth(trace.value)"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-xs py-2">1,234,567,890</td>
|
||||
<td class="text-xs p-2">100%</td>
|
||||
<td class="text-xs py-2 text-right">{{ trace.count }}</td>
|
||||
<td class="text-xs p-2">{{ trace.ratio }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -33,16 +35,17 @@
|
||||
</section>
|
||||
<!-- Trace item Table -->
|
||||
<section class="pl-4 h-full w-[calc(100%_-_320px)]">
|
||||
<p class="h2 mb-2">Trace #501</p>
|
||||
<div class="h-52 px-2 mb-2 border border-neutral-300 rounded">
|
||||
<div class="h-full scrollbar overflow-x-auto">
|
||||
<p class="h2 mb-2">Trace #{{ showTraceId }}</p>
|
||||
<div class="h-52 w-full px-2 mb-2 border border-neutral-300 rounded">
|
||||
<div class="h-full w-full scrollbar overflow-x-auto">
|
||||
<div id="cyTrace" ref="cyTrace" class="h-full min-w-full relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)]">
|
||||
<DataTable :value="products" showGridlines>
|
||||
<Column field="code" header="Code" sortable></Column>
|
||||
<Column field="name" header="Name" sortable></Column>
|
||||
<Column field="category" header="Category" sortable></Column>
|
||||
<div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)]">
|
||||
<DataTable :value="cases" showGridlines>
|
||||
<Column field="id" header="Case ID" sortable></Column>
|
||||
<Column field="started_at" header="Start time" sortable></Column>
|
||||
<Column field="completed_at" header="End time" sortable></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</section>
|
||||
@@ -51,211 +54,142 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
sidebarTraces: {
|
||||
type: Boolean,
|
||||
require: true,
|
||||
},
|
||||
traces: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
traceTaskSeq: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
cases: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
products: [
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
processMap:{
|
||||
nodes:[],
|
||||
edges:[],
|
||||
},
|
||||
{
|
||||
id: '1001',
|
||||
code: 'nvklal433',
|
||||
name: 'Black Watch',
|
||||
description: 'Product Description',
|
||||
image: 'black-watch.jpg',
|
||||
price: 72,
|
||||
category: 'Accessories',
|
||||
quantity: 61,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 4
|
||||
},
|
||||
{
|
||||
id: '1002',
|
||||
code: 'zz21cz3c1',
|
||||
name: 'Blue Band',
|
||||
description: 'Product Description',
|
||||
image: 'blue-band.jpg',
|
||||
price: 79,
|
||||
category: 'Fitness',
|
||||
quantity: 2,
|
||||
inventoryStatus: 'LOWSTOCK',
|
||||
rating: 3
|
||||
},
|
||||
{
|
||||
id: '1003',
|
||||
code: '244wgerg2',
|
||||
name: 'Blue T-Shirt',
|
||||
description: 'Product Description',
|
||||
image: 'blue-t-shirt.jpg',
|
||||
price: 29,
|
||||
category: 'Clothing',
|
||||
quantity: 25,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
id: '1001',
|
||||
code: 'nvklal433',
|
||||
name: 'Black Watch',
|
||||
description: 'Product Description',
|
||||
image: 'black-watch.jpg',
|
||||
price: 72,
|
||||
category: 'Accessories',
|
||||
quantity: 61,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 4
|
||||
},
|
||||
{
|
||||
id: '1002',
|
||||
code: 'zz21cz3c1',
|
||||
name: 'Blue Band',
|
||||
description: 'Product Description',
|
||||
image: 'blue-band.jpg',
|
||||
price: 79,
|
||||
category: 'Fitness',
|
||||
quantity: 2,
|
||||
inventoryStatus: 'LOWSTOCK',
|
||||
rating: 3
|
||||
},
|
||||
{
|
||||
id: '1003',
|
||||
code: '244wgerg2',
|
||||
name: 'Blue T-Shirt',
|
||||
description: 'Product Description',
|
||||
image: 'blue-t-shirt.jpg',
|
||||
price: 29,
|
||||
category: 'Clothing',
|
||||
quantity: 25,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
id: '1001',
|
||||
code: 'nvklal433',
|
||||
name: 'Black Watch',
|
||||
description: 'Product Description',
|
||||
image: 'black-watch.jpg',
|
||||
price: 72,
|
||||
category: 'Accessories',
|
||||
quantity: 61,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 4
|
||||
},
|
||||
{
|
||||
id: '1002',
|
||||
code: 'zz21cz3c1',
|
||||
name: 'Blue Band',
|
||||
description: 'Product Description',
|
||||
image: 'blue-band.jpg',
|
||||
price: 79,
|
||||
category: 'Fitness',
|
||||
quantity: 2,
|
||||
inventoryStatus: 'LOWSTOCK',
|
||||
rating: 3
|
||||
},
|
||||
{
|
||||
id: '1003',
|
||||
code: '244wgerg2',
|
||||
name: 'Blue T-Shirt',
|
||||
description: 'Product Description',
|
||||
image: 'blue-t-shirt.jpg',
|
||||
price: 29,
|
||||
category: 'Clothing',
|
||||
quantity: 25,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
id: '1000',
|
||||
code: 'f230fh0g3',
|
||||
name: 'Bamboo Watch',
|
||||
description: 'Product Description',
|
||||
image: 'bamboo-watch.jpg',
|
||||
price: 65,
|
||||
category: 'Accessories',
|
||||
quantity: 24,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
id: '1001',
|
||||
code: 'nvklal433',
|
||||
name: 'Black Watch',
|
||||
description: 'Product Description',
|
||||
image: 'black-watch.jpg',
|
||||
price: 72,
|
||||
category: 'Accessories',
|
||||
quantity: 61,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 4
|
||||
},
|
||||
{
|
||||
id: '1002',
|
||||
code: 'zz21cz3c1',
|
||||
name: 'Blue Band',
|
||||
description: 'Product Description',
|
||||
image: 'blue-band.jpg',
|
||||
price: 79,
|
||||
category: 'Fitness',
|
||||
quantity: 2,
|
||||
inventoryStatus: 'LOWSTOCK',
|
||||
rating: 3
|
||||
},
|
||||
{
|
||||
id: '1003',
|
||||
code: '244wgerg2',
|
||||
name: 'Blue T-Shirt',
|
||||
description: 'Product Description',
|
||||
image: 'blue-t-shirt.jpg',
|
||||
price: 29,
|
||||
category: 'Clothing',
|
||||
quantity: 25,
|
||||
inventoryStatus: 'INSTOCK',
|
||||
rating: 5
|
||||
},
|
||||
],
|
||||
showTraceId: 1,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
traceTotal: function() {
|
||||
return this.traces.length;
|
||||
},
|
||||
traceList: function() {
|
||||
let list = [];
|
||||
|
||||
this.traces.forEach((trace, index) => {
|
||||
let data = {
|
||||
id: trace.id,
|
||||
value: Number((trace.ratio * 100).toFixed(1)),
|
||||
count: trace.count,
|
||||
ratio: this.getPercentLabel(trace.ratio),
|
||||
};
|
||||
|
||||
list.push(data);
|
||||
});
|
||||
|
||||
return list;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Number to percentage
|
||||
* @param {number} val
|
||||
* @returns {string} 轉換完成的百分比字串
|
||||
*/
|
||||
getPercentLabel(val){
|
||||
return (val * 100 === 100) ? `${val * 100}%` : `${(val * 100).toFixed(1)}%`;
|
||||
},
|
||||
/**
|
||||
* set progress bar width
|
||||
* @param {number} value
|
||||
* @returns {string} 樣式的寬度設定
|
||||
*/
|
||||
progressWidth(value){
|
||||
return `width:${value}%;`
|
||||
},
|
||||
/**
|
||||
* switch case data
|
||||
* @param {number} id
|
||||
*/
|
||||
async switchCaseData(id) {
|
||||
this.showTraceId = id;
|
||||
this.$emit('switch-Trace-Id', this.showTraceId);
|
||||
},
|
||||
/**
|
||||
* 將 trace element nodes 資料彙整
|
||||
*/
|
||||
setNodesData(){
|
||||
// 避免每次渲染都重複累加
|
||||
this.processMap.nodes = [];
|
||||
// 將 api call 回來的資料帶進 node
|
||||
this.traceTaskSeq.forEach((node, index) => {
|
||||
this.processMap.nodes.push({
|
||||
data: {
|
||||
id: index,
|
||||
label: node,
|
||||
backgroundColor: '#CCE5FF',
|
||||
bordercolor: '#003366',
|
||||
shape: 'round-rectangle',
|
||||
height: 80,
|
||||
width: 100
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 將 trace edge line 資料彙整
|
||||
*/
|
||||
setEdgesData(){
|
||||
this.processMap.edges = [];
|
||||
this.traceTaskSeq.forEach((edge, index) => {
|
||||
this.processMap.edges.push({
|
||||
data: {
|
||||
source: `${index}`,
|
||||
target: `${index + 1}`,
|
||||
lineWidth: 1,
|
||||
style: 'solid'
|
||||
}
|
||||
});
|
||||
});
|
||||
// 關係線數量筆節點少一個
|
||||
this.processMap.edges.pop();
|
||||
},
|
||||
/**
|
||||
* create trace cytoscape's map
|
||||
*/
|
||||
createCy(){
|
||||
let graphId = this.$refs.cyTrace;
|
||||
|
||||
this.setNodesData();
|
||||
this.setEdgesData();
|
||||
cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
|
||||
},
|
||||
show() {
|
||||
this.setNodesData();
|
||||
this.setEdgesData();
|
||||
this.createCy();
|
||||
}
|
||||
},
|
||||
created(){
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user