Conformance: Have activity More done.
This commit is contained in:
chiayin
@@ -23,13 +23,13 @@
|
||||
<tbody>
|
||||
<tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @click="switchCaseData(trace.id)">
|
||||
<td class="p-2">#{{ trace.id }}</td>
|
||||
<td class="p-2 w-24">
|
||||
<!-- <td class="p-2 w-24">
|
||||
<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="py-2 text-right">{{ trace.count }}</td>
|
||||
<td class="p-2">{{ trace.ratio }}%</td>
|
||||
<td class="p-2">{{ trace.ratio }}%</td> -->
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -40,14 +40,14 @@
|
||||
<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-full w-full">
|
||||
<div id="cyTrace" ref="cyTrace" class="h-full min-w-full relative"></div>
|
||||
<div id="cfmTrace" ref="cfmTrace" 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="cases" showGridlines tableClass="text-sm" breakpoint="0">
|
||||
<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 :value="caseData" showGridlines tableClass="text-sm" breakpoint="0">
|
||||
<div v-for="(col, index) in columnData" :key="index">
|
||||
<Column :field="col.field" :header="col.header" sortable></Column>
|
||||
</div>
|
||||
</DataTable>
|
||||
</div>
|
||||
</section>
|
||||
@@ -55,44 +55,62 @@
|
||||
</Dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import ConformanceStore from '@/stores/conformance.js';
|
||||
import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
|
||||
|
||||
export default {
|
||||
props: ['issusModal'],
|
||||
props: ['issusModal', 'issusNo'],
|
||||
setup() {
|
||||
const conformanceStore = ConformanceStore();
|
||||
const { issueTraces, taskSeq, cases } = storeToRefs(conformanceStore);
|
||||
|
||||
return { issueTraces, taskSeq, cases, conformanceStore }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
contentClass: '!bg-neutral-100 border-t border-neutral-300 h-full',
|
||||
traceList:[
|
||||
{
|
||||
id: 1,
|
||||
value: 80,
|
||||
count: 1234567890,
|
||||
ratio: 100,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: 80,
|
||||
count: 4567890,
|
||||
ratio: 100,
|
||||
},
|
||||
],
|
||||
showTraceId: 1,
|
||||
cases:[
|
||||
{
|
||||
id: 1,
|
||||
started_at: '2222/11/11',
|
||||
completed_at: '2222/11/11'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
started_at: '2222/11/11',
|
||||
completed_at: '2222/11/11'
|
||||
},
|
||||
]
|
||||
processMap:{
|
||||
nodes:[],
|
||||
edges:[],
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
traceTotal: function() {
|
||||
return this.traceList.length;
|
||||
},
|
||||
traceList: function() {
|
||||
return this.issueTraces.map(trace => {
|
||||
return {
|
||||
id: trace,
|
||||
// value: Number((trace.ratio * 100).toFixed(1)),
|
||||
// count: trace.count,
|
||||
// ratio: this.getPercentLabel(trace.count / this.traceCountTotal),
|
||||
};
|
||||
}).sort((x, y) => x.id - y.id);
|
||||
},
|
||||
caseData: function() {
|
||||
const data = JSON.parse(JSON.stringify(this.cases)); // 深拷貝原始 cases 的內容
|
||||
data.forEach(item => {
|
||||
item.attributes.forEach((attribute, index) => {
|
||||
item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
|
||||
});
|
||||
delete item.attributes; // 刪除原本的 attributes 屬性
|
||||
})
|
||||
return data;
|
||||
},
|
||||
columnData: function() {
|
||||
const data = JSON.parse(JSON.stringify(this.cases)); // 深拷貝原始 cases 的內容
|
||||
const result = [
|
||||
{ field: 'id', header: 'ID' },
|
||||
{ field: 'started_at', header: 'Start Date' },
|
||||
{ field: 'completed_at', header: 'End Date' },
|
||||
...data[0].attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),
|
||||
];
|
||||
return result
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
@@ -107,10 +125,66 @@ export default {
|
||||
* switch case data
|
||||
* @param {number} id
|
||||
*/
|
||||
async switchCaseData(id) {
|
||||
switchCaseData(id) {
|
||||
this.showTraceId = id;
|
||||
this.$emit('switch-Trace-Id', this.showTraceId);
|
||||
this.conformanceStore.getLogConformanceTraceDetail(this.issusNo, id)
|
||||
},
|
||||
/**
|
||||
* 將 trace element nodes 資料彙整
|
||||
*/
|
||||
setNodesData(){
|
||||
// 避免每次渲染都重複累加
|
||||
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
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 將 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'
|
||||
}
|
||||
});
|
||||
});
|
||||
// 關係線數量筆節點少一個
|
||||
this.processMap.edges.pop();
|
||||
},
|
||||
/**
|
||||
* create trace cytoscape's map
|
||||
*/
|
||||
createCy(){
|
||||
this.$nextTick(() => {
|
||||
let graphId = this.$refs.cfmTrace;
|
||||
|
||||
this.setNodesData();
|
||||
this.setEdgesData();
|
||||
cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
taskSeq: function(newValue){
|
||||
if(newValue !== null) this.createCy();
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user