You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
2.6 KiB
127 lines
2.6 KiB
<template>
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span style="border-left: 3px solid #338de3ff; padding-left: 6px"
|
|
>图书借阅统计</span
|
|
>
|
|
<DatePicker
|
|
transfer
|
|
:value="select.date"
|
|
placeholder="选择所属年份"
|
|
placement="bottom"
|
|
style="width: 130px; float: right"
|
|
type="month"
|
|
format
|
|
@on-change="changeMonth"
|
|
></DatePicker>
|
|
</div>
|
|
<div class="progress-card">
|
|
<div class="progress-card-item">
|
|
<div class="progress-card-item__num">{{ totalData.borrow.total }}</div>
|
|
<div class="progress-card-item__label">借出</div>
|
|
</div>
|
|
<div class="progress-card-item">
|
|
<div class="progress-card-item__num">
|
|
{{ totalData.borrow.rate + "%" }}
|
|
</div>
|
|
<div class="progress-card-item__label">借出量</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { httpCurl } from "@/api/out";
|
|
export default {
|
|
name: "card6",
|
|
layout: {
|
|
x: 0,
|
|
y: 0,
|
|
w: 4,
|
|
h: 5,
|
|
i: "7",
|
|
name: "图书借阅统计",
|
|
},
|
|
data() {
|
|
return {
|
|
select: {
|
|
token: "",
|
|
date: this.$moment(new Date()).format("YYYY-MM"),
|
|
},
|
|
statistic: {
|
|
progress: {},
|
|
},
|
|
totalData: {
|
|
borrow: {
|
|
no_return: 0,
|
|
total: 0,
|
|
rate: 0,
|
|
},
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
changeMonth(e) {
|
|
this.date = e;
|
|
this.getStatic();
|
|
},
|
|
async getToken() {
|
|
if (/^\/system/.test(this.$route.path)) return;
|
|
const token = await httpCurl(
|
|
{
|
|
id: this.$store.state.user.userId,
|
|
username: this.$store.state.user.username,
|
|
},
|
|
true,
|
|
"",
|
|
"POST",
|
|
`${process.env["VUE_APP_OUT_Book"]}/api/admin/auth/oss-login`
|
|
);
|
|
this.token = token.access_token;
|
|
},
|
|
async getStatic() {
|
|
if (/^\/system/.test(this.$route.path)) return;
|
|
const res = await httpCurl(
|
|
{
|
|
token: this.token,
|
|
date: this.date,
|
|
},
|
|
true,
|
|
"",
|
|
"post",
|
|
`${process.env["VUE_APP_OUT_Book"]}/api/admin/other/chart-total`
|
|
);
|
|
console.log(res);
|
|
this.totalData = res;
|
|
},
|
|
},
|
|
computed: {},
|
|
async created() {
|
|
await this.getToken();
|
|
await this.getStatic();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.progress-card {
|
|
display: flex;
|
|
|
|
&-item {
|
|
text-align: center;
|
|
flex: 1;
|
|
|
|
&__label {
|
|
font-size: 14px;
|
|
}
|
|
|
|
&__num {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
|
|
padding: 6px 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|