Conformance: Activity sequence Short loop(s) done.

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

View File

@@ -1,5 +1,5 @@
<template>
<Dialog :visible="issusModal" @update:visible="$emit('update:isVisible', $event)" modal :style="{ width: '90vw', height: '90vh' }" :contentClass="contentClass">
<Dialog :visible="listModal" @update:visible="$emit('update:isVisible', $event)" modal :style="{ width: '90vw', height: '90vh' }" :contentClass="contentClass">
<template #header>
<div class=" py-5">
<p class="text-base font-bold">Non-conformance Issue</p>
@@ -60,12 +60,12 @@ import ConformanceStore from '@/stores/conformance.js';
import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
export default {
props: ['issusModal', 'issusNo', 'traceId', 'firstCases'],
props: ['listModal', 'listNo', 'traceId', 'firstCases', 'listTraces', 'taskSeq', 'cases', 'category'],
setup() {
const conformanceStore = ConformanceStore();
const { issueTraces, taskSeq, cases, infinite404 } = storeToRefs(conformanceStore);
const { infinite404 } = storeToRefs(conformanceStore);
return { issueTraces, taskSeq, cases, infinite404, conformanceStore }
return { infinite404, conformanceStore }
},
data() {
return {
@@ -85,9 +85,9 @@ export default {
return this.traceList.length;
},
traceList: function() {
let sum = this.issueTraces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
let sum = this.listTraces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
return this.issueTraces.map(trace => {
return this.listTraces.map(trace => {
return {
id: trace.id,
value: Number((this.getPercentLabel(trace.count / sum))),
@@ -120,8 +120,11 @@ export default {
},
},
watch: {
listModal: function(newValue) { // 第一次打開 Modal 要繪圖
if(newValue) this.createCy();
},
taskSeq: function(newValue){
if(newValue !== null) this.createCy();
if (newValue != null) this.createCy();
},
traceId: function(newValue) {
// 當 traceId 屬性變化時更新 showTraceId
@@ -167,7 +170,10 @@ export default {
this.maxItems = false;
this.showTraceId = id;
this.startNum = 0;
let result = await this.conformanceStore.getLogConformanceTraceDetail(this.issusNo, id, 0);
let result;
if(this.category === 'issue') result = await this.conformanceStore.getLogConformanceTraceDetail(this.listNo, id, 0);
else if(this.category === 'loop') result = await this.conformanceStore.getLogConformanceLoopsTraceDetail(this.listNo, id, 0);
this.infiniteData = await result;
},
/**
@@ -177,35 +183,39 @@ export default {
// 避免每次渲染都重複累加
this.processMap.nodes = [];
// 將 api call 回來的資料帶進 node
this.taskSeq.forEach((node, index) => {
this.processMap.nodes.push({
data: {
id: index,
label: node,
backgroundColor: '#CCE5FF',
bordercolor: '#003366',
shape: 'round-rectangle',
height: 80,
width: 100
}
if(this.taskSeq != null) {
this.taskSeq.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.taskSeq.forEach((edge, index) => {
this.processMap.edges.push({
data: {
source: `${index}`,
target: `${index + 1}`,
lineWidth: 1,
style: 'solid'
}
if(this.taskSeq != null) {
this.taskSeq.forEach((edge, index) => {
this.processMap.edges.push({
data: {
source: `${index}`,
target: `${index + 1}`,
lineWidth: 1,
style: 'solid'
}
});
});
});
};
// 關係線數量筆節點少一個
this.processMap.edges.pop();
},
@@ -218,7 +228,7 @@ export default {
this.setNodesData();
this.setEdgesData();
if(graphId !== null) cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
if(graphId != null) cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
});
},
/**
@@ -228,7 +238,7 @@ export default {
try {
this.loading = true;
this.startNum += 20
const result = await this.conformanceStore.getLogConformanceTraceDetail(this.issusNo, this.showTraceId, this.startNum);
const result = await this.conformanceStore.getLogConformanceTraceDetail(this.listNo, this.showTraceId, this.startNum);
this.infiniteData = [...this.infiniteData, ...result];
} catch(error) {
// console.error('Failed to load data:', error);