Conformance: Have activity More done.

2023-07-25 16:12:46 +08:00
parent dc4ede1d62
commit f2df01e855
5 changed files with 2871 additions and 1176 deletions
--- a/src/components/Discover/Conformance/ConformanceResults.vue
+++ b/src/components/Discover/Conformance/ConformanceResults.vue
@@ -119,7 +119,7 @@
                <td class="p-2 text-right truncate">{{ trace.count }}</td>
                <td class="p-2 text-center">{{ trace.ratio }}%</td>
                <td class="p-2 text-center">
-                  <div class="btn btn-sm btn-c-primary cursor-pointer" @click="issusModal = true">More</div>
+                  <div class="btn btn-sm btn-c-primary cursor-pointer" @click="openMore(trace.no)">More</div>
                </td>
              </tr>
            </tbody>
@@ -127,14 +127,14 @@
      </div>
    </div>
  </section>
-  <MoreModal :issusModal="issusModal" @update:visible="issusModal = $event"></MoreModal>
+  <MoreModal :issusModal="issusModal" @update:visible="issusModal = $event" :issueTraces="issueTraces" :issusNo="issusNo" ref="moreModal"></MoreModal>
 </section>
 </template>
 <script>
-import iconNA from '@/components/icons/IconNA.vue';
-import MoreModal from './MoreModal.vue';
 import { storeToRefs } from 'pinia';
 import ConformanceStore from '@/stores/conformance.js';
+import iconNA from '@/components/icons/IconNA.vue';
+import MoreModal from './MoreModal.vue';
 import getNumberLabel from '@/module/numberLabel.js';
 import { setLineChartData, setBarChartData } from '@/module/setChartData.js';
 import abbreviateNumber from '@/module/abbreviateNumber.js';
@@ -143,9 +143,9 @@ import getMoment from 'moment';
 export default {
  setup() {
    const conformanceStore = ConformanceStore();
-    const { conformanceTempReportData } = storeToRefs(conformanceStore);
+    const { conformanceTempReportData, issueTraces, taskSeq, } = storeToRefs(conformanceStore);

-    return { conformanceTempReportData, conformanceStore }
+    return { conformanceTempReportData, issueTraces, taskSeq, conformanceStore }
  },
  data() {
    return {
@@ -179,6 +179,7 @@ export default {
      rateChartOptions: null,
      casesChartData: null,
      casesChartOptions: null,
+      issusNo: null,
      tooltip: {
        results: {
          value: 'This page will perform a conformance check based on the filtering results of the map.',
@@ -226,6 +227,14 @@ export default {
    convertSecToDay(sec) {
      return (sec / 86400)
    },
+    async openMore(no) {
+      // async await 解決非同步資料延遲傳遞導致未讀取到而出錯的問題
+      this.issusNo = no;
+      await this.conformanceStore.getLogConformanceIssue(no);
+      await this.conformanceStore.getLogConformanceTraceDetail(no, this.issueTraces[0]);
+      this.issusModal = await true;
+      await this.$refs.moreModal.createCy()
+    },
    /**
     * set conformance report data
     * @param   {object} data new watch's value
--- a/src/components/Discover/Conformance/MoreModal.vue
+++ b/src/components/Discover/Conformance/MoreModal.vue
@@ -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>