10 changed files with 366 additions and 232 deletions
-
4.env.development
-
34src/api/library.js
-
11src/components/echart/lineChartService.vue
-
7src/main.js
-
192src/utils/index.js
-
40src/views/lengingRanking/index.vue
-
10src/views/newBookRecommend/index.vue
-
41src/views/readStar/index.vue
-
130src/views/todayBorrowed/index.vue
-
129vue.config.js
@ -1,92 +1,100 @@ |
|||
export function debounce(func, wait, immediate) { |
|||
let timeout, args, context, timestamp, result |
|||
|
|||
const later = function() { |
|||
// 据上一次触发时间间隔
|
|||
const last = +new Date() - timestamp |
|||
|
|||
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
|
|||
if (last < wait && last > 0) { |
|||
timeout = setTimeout(later, wait - last) |
|||
} else { |
|||
timeout = null |
|||
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
|
|||
if (!immediate) { |
|||
result = func.apply(context, args) |
|||
if (!timeout) context = args = null |
|||
} |
|||
} |
|||
} |
|||
|
|||
return function(...args) { |
|||
context = this |
|||
timestamp = +new Date() |
|||
const callNow = immediate && !timeout |
|||
// 如果延时不存在，重新设定延时
|
|||
if (!timeout) timeout = setTimeout(later, wait) |
|||
if (callNow) { |
|||
result = func.apply(context, args) |
|||
context = args = null |
|||
} |
|||
|
|||
return result |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Parse the time to string |
|||
* @param {(Object|string|number)} time |
|||
* @param {string} cFormat |
|||
* @returns {string} |
|||
*/ |
|||
export function parseTime(time, cFormat) { |
|||
if (arguments.length === 0) { |
|||
return null |
|||
} |
|||
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' |
|||
let date |
|||
if (typeof time === 'undefined' || time === null || time === 'null') { |
|||
return '' |
|||
} else if (typeof time === 'object') { |
|||
date = time |
|||
} else { |
|||
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) { |
|||
time = parseInt(time) |
|||
} |
|||
if ((typeof time === 'number') && (time.toString().length === 10)) { |
|||
time = time * 1000 |
|||
} |
|||
date = new Date(time) |
|||
} |
|||
const formatObj = { |
|||
y: date.getFullYear(), |
|||
m: date.getMonth() + 1, |
|||
d: date.getDate(), |
|||
h: date.getHours(), |
|||
i: date.getMinutes(), |
|||
s: date.getSeconds(), |
|||
a: date.getDay() |
|||
} |
|||
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { |
|||
let value = formatObj[key] |
|||
// Note: getDay() returns 0 on Sunday
|
|||
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] } |
|||
if (result.length > 0 && value < 10) { |
|||
value = '0' + value |
|||
} |
|||
return value || 0 |
|||
}) |
|||
return time_str |
|||
} |
|||
|
|||
// 获取当前日期时间
|
|||
export function getCurrentTime() { |
|||
const yy = new Date().getFullYear() |
|||
const mm = new Date().getMonth() + 1 |
|||
const dd = new Date().getDate() |
|||
const hh = new Date().getHours() |
|||
const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes() |
|||
const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds() |
|||
const time = yy + '年' + mm + '月' + dd + '日 ' + hh + ':' + mf + ':' + ss |
|||
return time |
|||
} |
|||
export function debounce(func, wait, immediate) { |
|||
let timeout, args, context, timestamp, result |
|||
|
|||
const later = function() { |
|||
// 据上一次触发时间间隔
|
|||
const last = +new Date() - timestamp |
|||
|
|||
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
|
|||
if (last < wait && last > 0) { |
|||
timeout = setTimeout(later, wait - last) |
|||
} else { |
|||
timeout = null |
|||
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
|
|||
if (!immediate) { |
|||
result = func.apply(context, args) |
|||
if (!timeout) context = args = null |
|||
} |
|||
} |
|||
} |
|||
|
|||
return function(...args) { |
|||
context = this |
|||
timestamp = +new Date() |
|||
const callNow = immediate && !timeout |
|||
// 如果延时不存在，重新设定延时
|
|||
if (!timeout) timeout = setTimeout(later, wait) |
|||
if (callNow) { |
|||
result = func.apply(context, args) |
|||
context = args = null |
|||
} |
|||
|
|||
return result |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* Parse the time to string |
|||
* @param {(Object|string|number)} time |
|||
* @param {string} cFormat |
|||
* @returns {string} |
|||
*/ |
|||
export function parseTime(time, cFormat) { |
|||
if (arguments.length === 0) { |
|||
return null |
|||
} |
|||
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' |
|||
let date |
|||
if (typeof time === 'undefined' || time === null || time === 'null') { |
|||
return '' |
|||
} else if (typeof time === 'object') { |
|||
date = time |
|||
} else { |
|||
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) { |
|||
time = parseInt(time) |
|||
} |
|||
if ((typeof time === 'number') && (time.toString().length === 10)) { |
|||
time = time * 1000 |
|||
} |
|||
date = new Date(time) |
|||
} |
|||
const formatObj = { |
|||
y: date.getFullYear(), |
|||
m: date.getMonth() + 1, |
|||
d: date.getDate(), |
|||
h: date.getHours(), |
|||
i: date.getMinutes(), |
|||
s: date.getSeconds(), |
|||
a: date.getDay() |
|||
} |
|||
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { |
|||
let value = formatObj[key] |
|||
// Note: getDay() returns 0 on Sunday
|
|||
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] } |
|||
if (result.length > 0 && value < 10) { |
|||
value = '0' + value |
|||
} |
|||
return value || 0 |
|||
}) |
|||
return time_str |
|||
} |
|||
|
|||
// 获取当前日期时间
|
|||
export function getCurrentTime() { |
|||
const yy = new Date().getFullYear() |
|||
const mm = new Date().getMonth() + 1 |
|||
const dd = new Date().getDate() |
|||
const hh = new Date().getHours() |
|||
const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes() |
|||
const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds() |
|||
const time = yy + '年' + mm + '月' + dd + '日 ' + hh + ':' + mf + ':' + ss |
|||
return time |
|||
} |
|||
|
|||
export function getFormattedDate(date, yearOffset = 0) { |
|||
date.setFullYear(date.getFullYear() + yearOffset) |
|||
const year = date.getFullYear() |
|||
const month = (date.getMonth() + 1).toString().padStart(2, '0') |
|||
const day = date.getDate().toString().padStart(2, '0') |
|||
return `${year}-${month}-${day}` |
|||
} |
|||
@ -1,51 +1,79 @@ |
|||
<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 { FetchHalfYearBRNum } from '@/api/library' |
|||
export default { |
|||
name: 'TodayBorrowed', |
|||
components: { |
|||
LineChartService |
|||
}, |
|||
data() { |
|||
return { |
|||
chartData: { |
|||
returnData: [], |
|||
borrowedData: [] |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
this.getHalfYearBRNum() |
|||
}, |
|||
methods: { |
|||
getHalfYearBRNum() { |
|||
FetchHalfYearBRNum().then(res => { |
|||
if (res.errCode === 0) { |
|||
this.chartData.borrowedData = res.data.borrow |
|||
this.chartData.returnData = res.data.return |
|||
} else { |
|||
this.$message.error('接口错误') |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
</style> |
|||
<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 { FetchHalfYearBRNum, FetchTodayJH } from '@/api/library' |
|||
export default { |
|||
name: 'TodayBorrowed', |
|||
components: { |
|||
LineChartService |
|||
}, |
|||
data() { |
|||
return { |
|||
chartData: { |
|||
returnData: [], |
|||
borrowedData: [] |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
this.getTodayJH() |
|||
}, |
|||
methods: { |
|||
getHalfYearBRNum() { |
|||
FetchHalfYearBRNum().then(res => { |
|||
if (res.errCode === 0) { |
|||
this.chartData.borrowedData = res.data.borrow |
|||
this.chartData.returnData = res.data.return |
|||
} else { |
|||
this.$message.error('接口错误') |
|||
} |
|||
}) |
|||
}, |
|||
getTodayJH() { |
|||
FetchTodayJH().then(res => { |
|||
this.chartData = { |
|||
timeData: [], |
|||
returnData: [], |
|||
borrowedData: [] |
|||
} |
|||
const result = res.data |
|||
const time = ['07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'] |
|||
time.forEach((hour, index) => { |
|||
// 查找 result 中是否有对应的 logHour |
|||
const foundItem = result.find(item => item.logHour === index + 7) // 因为 logHour 是从 7 开始，所以需要加上 7 |
|||
if (foundItem) { |
|||
// 如果找到了对应的 logHour，则将数据加入 chartDayData |
|||
this.chartData.timeData.push(`${foundItem.logHour}:00`) |
|||
this.chartData.returnData.push(foundItem.hccDay) |
|||
this.chartData.borrowedData.push(foundItem.jccDay) |
|||
} else { |
|||
// 如果没找到对应的 logHour，则将默认值加入 chartDayData |
|||
this.chartData.timeData.push(`${hour}`) |
|||
this.chartData.returnData.push(0) // 默认值为 0 |
|||
this.chartData.borrowedData.push(0) // 默认值为 0 |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error('Error', error) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~@/assets/styles/index.scss"; |
|||
</style> |
|||
@ -1,61 +1,68 @@ |
|||
const path = require('path') |
|||
const resolve = dir => { |
|||
return path.join(__dirname, dir) |
|||
} |
|||
const name = '智慧大屏' |
|||
module.exports = { |
|||
publicPath: process.env.NODE_ENV === 'development' ? '/' : './', |
|||
outputDir: 'dist', |
|||
assetsDir: 'static', |
|||
lintOnSave: process.env.NODE_ENV === 'development', |
|||
productionSourceMap: false, |
|||
devServer: { |
|||
port: 8080, |
|||
open: true, |
|||
overlay: { |
|||
warnings: false, |
|||
errors: true |
|||
}, |
|||
proxy: { |
|||
'/dxhtsg/': { |
|||
target: process.env.VUE_APP_BASE_API, |
|||
changeOrigin: true, |
|||
pathRewrite: { |
|||
'^/dxhtsg': 'dxhtsg' |
|||
} |
|||
}, |
|||
'/auth/': { |
|||
target: process.env.VUE_APP_BASE_API, |
|||
changeOrigin: true, |
|||
pathRewrite: { |
|||
'^/auth': 'auth' |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
configureWebpack: { |
|||
name: name, |
|||
resolve: { |
|||
alias: { |
|||
'@': resolve('src') |
|||
} |
|||
}, |
|||
performance: { |
|||
hints: 'warning', |
|||
// 入口起点的最大体积
|
|||
maxEntrypointSize: 50000000, |
|||
// 生成文件的最大体积
|
|||
maxAssetSize: 30000000 |
|||
} |
|||
}, |
|||
chainWebpack: config => { |
|||
config.resolve |
|||
.alias.set('_c', resolve('src/components')) |
|||
|
|||
config.plugin('html') |
|||
.tap(args => { |
|||
args[0].title = '智慧大屏' |
|||
return args |
|||
}) |
|||
} |
|||
} |
|||
const path = require('path') |
|||
const resolve = dir => { |
|||
return path.join(__dirname, dir) |
|||
} |
|||
const name = '智慧大屏' |
|||
module.exports = { |
|||
publicPath: process.env.NODE_ENV === 'development' ? '/' : './', |
|||
outputDir: 'dist', |
|||
assetsDir: 'static', |
|||
lintOnSave: process.env.NODE_ENV === 'development', |
|||
productionSourceMap: false, |
|||
devServer: { |
|||
port: 8080, |
|||
open: true, |
|||
overlay: { |
|||
warnings: false, |
|||
errors: true |
|||
}, |
|||
proxy: { |
|||
'/dxhtsg/': { |
|||
target: process.env.VUE_APP_BASE_API, |
|||
changeOrigin: true, |
|||
pathRewrite: { |
|||
'^/dxhtsg': 'dxhtsg' |
|||
} |
|||
}, |
|||
'/qyzt/': { |
|||
target: process.env.VUE_APP_BASE_API, |
|||
changeOrigin: true, |
|||
pathRewrite: { |
|||
'^/qyzt': 'qyzt' |
|||
} |
|||
}, |
|||
'/auth/': { |
|||
target: process.env.VUE_APP_BASE_API, |
|||
changeOrigin: true, |
|||
pathRewrite: { |
|||
'^/auth': 'auth' |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
configureWebpack: { |
|||
name: name, |
|||
resolve: { |
|||
alias: { |
|||
'@': resolve('src') |
|||
} |
|||
}, |
|||
performance: { |
|||
hints: 'warning', |
|||
// 入口起点的最大体积
|
|||
maxEntrypointSize: 50000000, |
|||
// 生成文件的最大体积
|
|||
maxAssetSize: 30000000 |
|||
} |
|||
}, |
|||
chainWebpack: config => { |
|||
config.resolve |
|||
.alias.set('_c', resolve('src/components')) |
|||
|
|||
config.plugin('html') |
|||
.tap(args => { |
|||
args[0].title = '智慧大屏' |
|||
return args |
|||
}) |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue