master
commit
08fec93c4b
@ -0,0 +1,121 @@
|
||||
<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.book.total}}</div>
|
||||
<div class="progress-card-item__label">总计</div>
|
||||
</div>
|
||||
<div class="progress-card-item">
|
||||
<div class="progress-card-item__num">{{totalData.book.no_return}}</div>
|
||||
<div class="progress-card-item__label">未归还</div>
|
||||
</div>
|
||||
<div class="progress-card-item">
|
||||
<div class="progress-card-item__num">{{totalData.book.rate+'%'}}</div>
|
||||
<div class="progress-card-item__label">{{(totalData.book.rate>0?'上升':(totalData.book.rate===0?'-':'下降'))}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { httpCurl } from "@/api/out";
|
||||
export default {
|
||||
name: "card5",
|
||||
layout: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 4,
|
||||
h: 5,
|
||||
i: "6",
|
||||
name: "图书统计",
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
select: {
|
||||
token: '',
|
||||
date: this.$moment(new Date()).format('YYYY-MM'),
|
||||
},
|
||||
statistic: {
|
||||
progress: {},
|
||||
},
|
||||
totalData: {
|
||||
book: {
|
||||
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`
|
||||
);
|
||||
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>
|
||||
@ -0,0 +1,126 @@
|
||||
<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>
|
||||
@ -1,119 +0,0 @@
|
||||
<template>
|
||||
<el-card id="line-chart-card" class="box-card" shadow="hover">
|
||||
<div slot="header">
|
||||
<span style="border-left: 3px solid #338DE3FF;padding-left: 6px;">lineChart</span>
|
||||
<i class="el-icon-more" style="float: right;font-size: 20px;"></i>
|
||||
</div>
|
||||
|
||||
<div id="line-chart" style="width: 100%;">
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import ElementResize from "element-resize-detector";
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
|
||||
const animationDuration = 6000
|
||||
export default {
|
||||
name:'card4',
|
||||
layout:{
|
||||
x:6,
|
||||
y:5,
|
||||
w:6,
|
||||
h:4,
|
||||
i:"4",
|
||||
name: "lineChart"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height:200,
|
||||
lineChartOption: {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value} °C'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Highest',
|
||||
type: 'line',
|
||||
data: [10, 11, 13, 11, 12, 12, 9],
|
||||
markPoint: {
|
||||
data: [
|
||||
{type: 'max', name: 'Max'},
|
||||
{type: 'min', name: 'Min'}
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [{type: 'average', name: 'Avg'}]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Lowest',
|
||||
type: 'line',
|
||||
data: [1, -2, 2, 5, 3, 2, 0],
|
||||
markPoint: {
|
||||
data: [{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}]
|
||||
},
|
||||
markLine: {
|
||||
data: [
|
||||
{type: 'average', name: 'Avg'},
|
||||
[
|
||||
{
|
||||
symbol: 'none',
|
||||
x: '90%',
|
||||
yAxis: 'max'
|
||||
},
|
||||
{
|
||||
symbol: 'circle',
|
||||
label: {
|
||||
position: 'start',
|
||||
formatter: 'Max'
|
||||
},
|
||||
type: 'max',
|
||||
name: '最高点'
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart(id,options){
|
||||
let cardDom = document.getElementById('line-chart-card');
|
||||
let cardTitleH = 58;
|
||||
let dom = document.getElementById(id)
|
||||
echarts.init(dom,"macarons").setOption(options)
|
||||
const elementResize = ElementResize({
|
||||
strategy:'scroll'
|
||||
})
|
||||
elementResize.listenTo(cardDom,ele => {
|
||||
dom.style.height = cardDom.getBoundingClientRect().height - 40 - cardTitleH + 'px'
|
||||
echarts.init(dom).resize();
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.initChart('line-chart',this.lineChartOption)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
Loading…
Reference in new issue