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