u

code/container-ocr/ocr-vue/src/views/home/components/value-card.vue

@@ -0,0 +1,102 @@
+<script setup lang="js">
+import { useUserStore } from "@/store/user";
+import { loadDataBySqlApi } from "@/request/api";
+import { getDateTime } from "@/utils/time";
+
+const props = defineProps({
+  item: Object,
+});
+
+const userStore = useUserStore();
+const value = ref("0");
+const flag_date = ref(false);
+const update_datetime = ref("");
+
+async function load() {
+  if (props.item.b_result) {
+    value.value = props.item.b_result;
+    update_datetime.value = props.item.b_update_datetime;
+    flag_date.value = true;
+  } else {
+    const sql = props.item.b_sql.replace(/:b_inputuser_id/g, `'${userStore.userInfo.userid}'`);
+    const res = await loadDataBySqlApi(sql);
+
+    if (res.success && res.data.length > 0) {
+      value.value = Object.values(res.data[0]).join(",");
+    }
+
+    if (res.success) {
+      update_datetime.value = getDateTime();
+    }
+  }
+}
+
+onMounted(async () => {
+  await load();
+});
+</script>
+
+<template>
+  <div class="g3-value-card">
+    <div class="header">
+      <span class="label">{{ props.item.b_name }}</span>
+      <G3Icon :icon="props.item.b_img" class="icon" />
+    </div>
+
+    <div class="container">
+      <span class="num"> {{ value }}</span>
+    </div>
+    <div class="footer">
+      <span> 刷新时间：{{ update_datetime }} </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.g3-value-card {
+  border-radius: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #f2f6fc;
+  background-color: #fff;
+  color: #303133;
+  user-select: none;
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    min-height: 50px;
+
+    .label {
+      font-size: 15px;
+    }
+
+    .icon {
+      font-size: 30px;
+      background-color: #f5f7fa;
+      padding: 5px;
+      border-radius: 6px;
+    }
+  }
+
+  .container {
+    padding: 0 20px;
+    min-height: 50px;
+
+    .num {
+      font-size: 32px;
+    }
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    margin: 0 5px;
+    padding: 0 15px;
+    box-sizing: border-box;
+    font-size: 12px;
+  }
+}
+</style>