Discover: fetch discover api && set element(nodes, edges) done

2023-02-22 16:10:40 +08:00
parent 8228f9791c
commit 78e18663aa
11 changed files with 361 additions and 74 deletions
--- a/src/views/Discover/index.vue
+++ b/src/views/Discover/index.vue
@@ -0,0 +1,187 @@
+<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;
+    },
+    /**
+     * 將node資料彙整
+     * @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;
+        }
+      });
+     },
+    /**
+     * 將edge資料彙整
+     * @param {string} type ProcessMap/BPMN
+     */
+    setEdgesData(type) {
+      //add event duration is empty
+      const event_duration = {
+        "total": "",
+        "rel_duration": "",
+        "average": "",
+        "median": "",
+        "max": "",
+        "min": "",
+        "cases": ""
+      };
+      this.processMap.edges.forEach(edge => {
+        this.processMapData.nodes.push({
+          data: {
+            source:edge.tail,
+            target:edge.head,
+            freq:edge.freq,
+            duration:edge.duration == null ? event_duration: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();
+      console.log(this.processMapData.nodes);
+    }
+
+  },
+  created() {
+    this.allMapDataStore.logId = this.$route.params.logId;
+  },
+  mounted() {
+    this.isLoading = false
+    // this.createCytoscape();
+    this.executeApi();
+  },
+}
+</script>