style(events): new event list table style

Signed-off-by: rovast <rovast@163.com>

src/views/iot/device/detail/events.vue

@@ -1,5 +1,52 @@
 <script setup lang="ts">
-import IgntCrud from "@/components/IgntCrud.vue";
+import { useClient } from "@/composables/useClient";
+import { smallCamelCase } from "@/utils/shared";
+import { useRoute } from "vue-router";
+import { ref, computed } from "vue";
+
+const route = useRoute();
+const client = useClient();
+
+const events = ref([]);
+
+const fetchEvents = async () => {
+  (client["StccommunityIotdepinprotocolIotdepinprotocol"] as any).query[
+    "queryEventPbAll"
+  ]({
+    deviceName: route.params.name,
+    "pagination.reverse": true
+  }).then(res => {
+    events.value = res.data[smallCamelCase("EventPb")];
+  });
+};
+
+fetchEvents();
+
+interface Payload {
+  payload_type: string;
+  path: string;
+  data: string;
+}
+const payloads = computed<Payload[]>(() => {
+  return events.value.map(e => {
+    const payload = window.atob(e.payload);
+    try {
+      const obj = JSON.parse(payload);
+
+      return {
+        payload_type: obj?.payload_type,
+        path: obj?.path,
+        data: obj?.data
+      };
+    } catch (e) {
+      return {
+        payload_type: "-",
+        path: "-",
+        data: "-"
+      };
+    }
+  });
+});
 </script>
 <template>
   <h2>Event Sources</h2>
@@ -9,8 +56,25 @@ import IgntCrud from "@/components/IgntCrud.vue";
     such as the Cron Job or Smart Contract Monitor.
   </p>
 
-  <IgntCrud
-    store-name="StccommunityIotdepinprotocolIotdepinprotocol"
-    item-name="EventPb"
-  />
+  <div class="overflow-x-auto mt-10">
+    <table class="table">
+      <!-- head -->
+      <thead>
+        <tr>
+          <th />
+          <th>Payload Type</th>
+          <th>Path</th>
+          <th>Data</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(data, k) in payloads" :key="k">
+          <th>{{ k + 1 }}</th>
+          <td>{{ data.payload_type }}</td>
+          <td>{{ data.path }}</td>
+          <td>{{ data.data }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>