103 lines
2.0 KiB
Vue
103 lines
2.0 KiB
Vue
<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>
|