188 lines
4.6 KiB
Vue
188 lines
4.6 KiB
Vue
<template>
|
||
<h1>H1底家啦～~~，這裡是 Discovery 動物頻道耶~</h1>
|
||
<div class="flex min-w-full min-h-screen">
|
||
<div class="cyto" id="cyto"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { storeToRefs } from 'pinia';
|
||
import LoadingStore from '@/stores/loading.js';
|
||
import AllMapDataStore from '@/stores/allMapData.js';
|
||
|
||
export default {
|
||
setup() {
|
||
const loadingStore = LoadingStore();
|
||
const allMapDataStore = AllMapDataStore();
|
||
const { isLoading } = storeToRefs(loadingStore);
|
||
const { processMap, bpmn } = storeToRefs(allMapDataStore);
|
||
|
||
return {
|
||
isLoading,
|
||
processMap, bpmn, allMapDataStore,
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
processMapData: {
|
||
startId: 0,
|
||
endId: 1,
|
||
nodes: [],
|
||
edges: [],
|
||
},
|
||
curveStyle:'unbundled-bezier', // 貝茲曲線 bezier | 直角 unbundled-bezier
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* Switch curve-style is 'bezier' or 'unbundled-bezier'.
|
||
* @param {string} style 貝茲曲線 bezier | 直角 unbundled-bezier
|
||
*/
|
||
switchCurveStyle(style){
|
||
this.curveStyle = style;
|
||
},
|
||
/**
|
||
* 將 element nodes 資料彙整
|
||
* @param {string} type ProcessMap | BPMN
|
||
*/
|
||
setNodesData(type){
|
||
const logFreq = {
|
||
"total": "",
|
||
"rel_freq": "",
|
||
"average": "",
|
||
"median": "",
|
||
"max": "",
|
||
"min": "",
|
||
"cases": ""
|
||
};
|
||
const logDuration = {
|
||
"total": "",
|
||
"rel_duration": "",
|
||
"average": "",
|
||
"median": "",
|
||
"max": "",
|
||
"min": "",
|
||
};
|
||
// BPMN 才有 gateway 類別
|
||
const gateway = {
|
||
parallel: "+",
|
||
exclusive: "x",
|
||
inclusive: "o",
|
||
};
|
||
|
||
// 將 api call 回來的資料帶進 node
|
||
this.processMap.vertices.forEach(node => {
|
||
switch (node.type) {
|
||
// add type of 'event' node
|
||
case 'event':
|
||
if(node.event_type === 'start') this.processMapData.startId = node.id;
|
||
else if(node.event_type === 'end') this.processMapData.endId = node.id;
|
||
|
||
this.processMapData.nodes.push({
|
||
data:{
|
||
id:node.id,
|
||
type:node.type,
|
||
label:node.event_type,
|
||
height:60,
|
||
width:60,
|
||
backgroundColor:'#FFCCCC',
|
||
bordercolor:'#003366',
|
||
shape:"ellipse",
|
||
freq:logFreq,
|
||
duration:logDuration,
|
||
}
|
||
});
|
||
break;
|
||
// add type of 'activity' node
|
||
default:
|
||
this.processMapData.nodes.push({
|
||
data:{
|
||
id:node.id,
|
||
type:node.type,
|
||
label:node.label,
|
||
height:80,
|
||
width:100,
|
||
backgroundColor:'#FFCCCC',
|
||
bordercolor:'#003366',
|
||
shape:"ellipse",
|
||
freq:node.freq,
|
||
duration:node.duration,
|
||
}
|
||
})
|
||
break;
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* 將 element edges 資料彙整
|
||
* @param {string} type ProcessMap/BPMN
|
||
*/
|
||
setEdgesData(type) {
|
||
//add event duration is empty
|
||
const logDuration = {
|
||
"total": "",
|
||
"rel_duration": "",
|
||
"average": "",
|
||
"median": "",
|
||
"max": "",
|
||
"min": "",
|
||
"cases": ""
|
||
};
|
||
this.processMap.edges.forEach(edge => {
|
||
this.processMapData.edges.push({
|
||
data: {
|
||
target:edge.head,
|
||
source:edge.tail,
|
||
freq:edge.freq,
|
||
duration:edge.duration === null ? logDuration : edge.duration,
|
||
style:'dotted',
|
||
lineWidth:1,
|
||
},
|
||
});
|
||
});
|
||
},
|
||
/**
|
||
* create and setting cytoscape
|
||
*/
|
||
createCytoscape() {
|
||
let graphId = document.getElementById('cyto');
|
||
// let nodes
|
||
// let edges
|
||
|
||
let cy = this.$cytoscape({
|
||
container: graphId,
|
||
// elements: {
|
||
// nodes: nodes, // 節點的資料
|
||
// edges: edges, // 關係線的資料
|
||
// },
|
||
layout: {
|
||
name: 'klay',
|
||
rankDir: 'LR' // 直向 TB | 橫向 LR
|
||
},
|
||
style: [
|
||
{
|
||
selector: 'node',
|
||
}
|
||
],
|
||
})
|
||
|
||
// this.$cytoscape.warnings(false); // false
|
||
},
|
||
async executeApi() {
|
||
await this.allMapDataStore.getAllMapData();
|
||
this.setNodesData();
|
||
this.setEdgesData();
|
||
}
|
||
|
||
},
|
||
created() {
|
||
this.allMapDataStore.logId = this.$route.params.logId;
|
||
},
|
||
mounted() {
|
||
this.isLoading = false
|
||
// this.createCytoscape();
|
||
this.executeApi();
|
||
},
|
||
}
|
||
</script>
|