Conformance: layout done.(not time range)

src/components/Discover/Conformance/MoreModal.vue

@@ -1,13 +1,116 @@
 <template>
-<Dialog :visible="issusModal" modal header="Header" :style="{ width: '50vw' }">
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
+<Dialog :visible="issusModal" @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>
+    </div>
+  </template>
+  <div class="h-full flex items-start justify-start p-4">
+      <!-- Trace List -->
+      <section class="w-80 h-full pr-4">
+        <p class="h2 px-2 mb-2">Trace List ({{ traceTotal }})</p>
+        <p class="text-primary h2 px-2 mb-2">
+          <span class="material-symbols-outlined text-sm align-[-10%] mr-2">info</span>Click trace number to see more.
+        </p>
+        <div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
+          <table class="border-separate border-spacing-x-2 text-sm">
+            <thead class="sticky top-0 z-10 bg-neutral-100">
+              <tr>
+                <th class="h2 px-2 border-b border-neutral-500">Trace</th>
+                <th class="h2 px-2 border-b border-neutral-500 text-start" colspan="3">Occurrences</th>
+              </tr>
+            </thead>
+            <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">
+                  <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>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+      <!-- Trace item Table -->
+      <section class="px-4 py-2 h-full w-[calc(100%_-_320px)] bg-neutral-10 rounded-xl">
+        <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>
+        </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>
+        </div>
+      </section>
+    </div>
 </Dialog>
 </template>
 <script>
 export default {
   props: ['issusModal'],
+  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'
+        },
+      ]
+    }
+  },
+  computed: {
+    traceTotal: function() {
+      return this.traceList.length;
+    },
+  },
+  methods: {
+    /**
+     * set progress bar width
+     * @param   {number} value
+     * @returns {string}      樣式的寬度設定
+     */
+     progressWidth(value){
+      return `width:${value}%;`
+    },
+    /**
+     * switch case data
+     * @param {number} id
+     */
+    async switchCaseData(id) {
+      this.showTraceId = id;
+      this.$emit('switch-Trace-Id', this.showTraceId);
+    },
+  },
 }
 </script>