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