20 changed files with 482 additions and 94 deletions
-
10.env.development
-
2package.json
-
25src/api/library.js
-
6src/assets/styles/index.scss
-
32src/components/echart/lineChart.vue
-
202src/components/echart/lineChartService.vue
-
10src/main.js
-
24src/router/index.js
-
12src/utils/request.js
-
0src/views/accessToLibrary/index.vue
-
14src/views/header/index.vue
-
20src/views/index.vue
-
63src/views/indexSelfService.vue
-
28src/views/lengingRanking/index.vue
-
2src/views/newBookRecommend/index.vue
-
0src/views/notice/index.vue
-
2src/views/readStar/index.vue
-
61src/views/todayBorrowed/index.vue
-
55src/views/totalLending/index.vue
-
8vue.config.js
@ -0,0 +1,25 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
// import qs from 'qs'
|
||||
|
|
||||
|
// 总借阅量
|
||||
|
export function FetchHalfYearBorrowNum(params) { |
||||
|
return request({ |
||||
|
url: '/txhtsg/getHalfYearBorrowNum', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 借阅排行榜
|
||||
|
export function FetchBorrowRank(params) { |
||||
|
return request({ |
||||
|
url: '/txhtsg/borrowRank', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
FetchHalfYearBorrowNum, |
||||
|
FetchBorrowRank |
||||
|
} |
||||
@ -0,0 +1,202 @@ |
|||||
|
<template> |
||||
|
<div id="main2" :style="{height:height,width:width}" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import echarts from 'echarts' |
||||
|
import resize from '@/utils/resizeMixins.js' |
||||
|
export default { |
||||
|
name: 'LineEcharts', |
||||
|
mixins: [resize], |
||||
|
props: { |
||||
|
className: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
chartData: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '100%' |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: 'calc(100% - 20px)' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chart: null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
chartData: { |
||||
|
deep: true, |
||||
|
handler(val) { |
||||
|
this.setOptions(val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initChart() |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (!this.chart) { |
||||
|
return |
||||
|
} |
||||
|
this.chart.dispose() |
||||
|
this.chart = null |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
const dom = document.getElementById('main2') |
||||
|
this.chart = echarts.init(dom, 'dark') |
||||
|
this.setOptions(this.chartData) |
||||
|
}, |
||||
|
setOptions({ returnData, borrowedData } = {}) { |
||||
|
this.chart.setOption({ |
||||
|
backgroundColor: '#010326', |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'cross', |
||||
|
label: { |
||||
|
backgroundColor: '#6a7985' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
legend: { |
||||
|
top: '4%', |
||||
|
right: '4%', |
||||
|
icon: 'rect', |
||||
|
itemHeight: 4, |
||||
|
itemWidth: 26, |
||||
|
textStyle: { |
||||
|
fontSize: '16px', |
||||
|
color: '#339CFF' |
||||
|
}, |
||||
|
data: ['借出', '归还'] |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '2%', |
||||
|
right: '4%', |
||||
|
bottom: '0', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: [{ |
||||
|
type: 'category', |
||||
|
boundaryGap: false, |
||||
|
// 坐标轴轴线相关设置 |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
width: '1', |
||||
|
color: '#113D72', |
||||
|
type: 'solid' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
fontWeight: 'bold', |
||||
|
color: '#fff' |
||||
|
}, |
||||
|
data: ['04:00', '08:00', '12:00', '16:00', '20:00', '24:00'] |
||||
|
}], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
// 坐标轴最大值、最小值、强制设置数据的步长间隔 |
||||
|
max: 1000, |
||||
|
min: 0, |
||||
|
interval: 250, |
||||
|
axisLabel: { |
||||
|
textStyle: { |
||||
|
color: '#fff', |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
}, |
||||
|
// 轴线 |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: '#113D72', |
||||
|
width: '1', |
||||
|
type: 'solid' |
||||
|
} |
||||
|
}, |
||||
|
// 坐标轴刻度相关设置。 |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
// 分割线 |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: '#113D72', |
||||
|
type: 'dashed', |
||||
|
// 透明度 |
||||
|
opacity: 1, |
||||
|
width: 1 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '归还', |
||||
|
type: 'line', |
||||
|
smooth: 0.6, |
||||
|
lineStyle: { |
||||
|
width: 1, |
||||
|
color: '#18B08F' |
||||
|
}, |
||||
|
showSymbol: false, |
||||
|
areaStyle: { |
||||
|
opacity: 0.6, |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
|
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: 'rgba(24, 176, 143, 0)' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: 'rgba(23, 175, 142, 1)' |
||||
|
} |
||||
|
]) |
||||
|
}, |
||||
|
data: returnData |
||||
|
}, |
||||
|
{ |
||||
|
name: '借出', |
||||
|
type: 'line', |
||||
|
smooth: 0.4, |
||||
|
lineStyle: { |
||||
|
width: 1, |
||||
|
color: '#FE8042' |
||||
|
}, |
||||
|
showSymbol: false, |
||||
|
areaStyle: { |
||||
|
opacity: 0.6, |
||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: 'rgba(254, 128, 66, 0)' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: 'rgba(254, 128, 66, 1)' |
||||
|
} |
||||
|
]) |
||||
|
}, |
||||
|
data: borrowedData |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,63 @@ |
|||||
|
<template> |
||||
|
<div id="screen-container"> |
||||
|
<Header :header-title="headerTitle" /> |
||||
|
<div class="screen-main"> |
||||
|
<div class="screen-left"> |
||||
|
<TodayBorrowed :chart-data="chartData" /> |
||||
|
<LengingRanking /> |
||||
|
</div> |
||||
|
<div class="screen-middle"> |
||||
|
<AccessToLibrary /> |
||||
|
<div class="video-box"> |
||||
|
<video width="100%" height="100%" controls loop autoplay muted :poster="poster"> |
||||
|
<source :src="src" type="video/mp4"> |
||||
|
</video> |
||||
|
</div> |
||||
|
<ReadStar /> |
||||
|
</div> |
||||
|
<div class="screen-right"> |
||||
|
<Notice /> |
||||
|
<NewBookRecommend /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Header from '@/views/header/index.vue' |
||||
|
import TodayBorrowed from '@/views/todayBorrowed/index.vue' |
||||
|
import LengingRanking from '@/views/lengingRanking/index.vue' |
||||
|
import AccessToLibrary from '@/views/accessToLibrary/index.vue' |
||||
|
import Notice from '@/views/notice/index.vue' |
||||
|
import NewBookRecommend from '@/views/newBookRecommend/index.vue' |
||||
|
import ReadStar from '@/views/readStar/index.vue' |
||||
|
export default { |
||||
|
name: 'Home', |
||||
|
components: { |
||||
|
Header, |
||||
|
TodayBorrowed, |
||||
|
LengingRanking, |
||||
|
AccessToLibrary, |
||||
|
ReadStar, |
||||
|
Notice, |
||||
|
NewBookRecommend |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
headerTitle: '24小时自助图书馆', |
||||
|
poster: 'https://qiniu.aiyxlib.com/1658104787005.jpg', |
||||
|
src: 'https://qiniu.aiyxlib.com/1658104739000.mp4' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,61 @@ |
|||||
|
<template> |
||||
|
<!-- 今日图书借还 --> |
||||
|
<div class="screen-item total-lending"> |
||||
|
<div class="common-title">今日图书借还</div> |
||||
|
<div class="small-module module-content"> |
||||
|
<div class="chart-wrapper" style="height: calc(100%);"> |
||||
|
<LineChartService :chart-data="chartData" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import LineChartService from '@/components/echart/lineChartService' |
||||
|
import { FetchHalfYearBorrowNum } from '@/api/library' |
||||
|
export default { |
||||
|
name: 'TodayBorrowed', |
||||
|
components: { |
||||
|
LineChartService |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
chartData: { |
||||
|
returnData: [0, 232, 101, 264, 90, 500, 250], |
||||
|
borrowedData: [130, 60, 400, 234, 120, 340, 600] |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
// this.getHalfYearBorrowNum() |
||||
|
}, |
||||
|
methods: { |
||||
|
getHalfYearBorrowNum() { |
||||
|
const params = { |
||||
|
ip: '111' |
||||
|
} |
||||
|
FetchHalfYearBorrowNum(params).then(res => { |
||||
|
console.log(res) |
||||
|
if (res.errCode === 0) { |
||||
|
// this.totalLendData = res.data.total |
||||
|
// this.chartData.totalLendMonth = res.data.list.map(item => { |
||||
|
// return item.date |
||||
|
// }) |
||||
|
// this.chartData.totalLendData = res.data.list.map(item => { |
||||
|
// return item.total |
||||
|
// }) |
||||
|
} else { |
||||
|
this.$message.error('接口错误') |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue