Conformance: Activity sequence Short loop(s) done.
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user