xuhuajiao
/
qy_bigScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

适配1440/页面优化

master
xuhuajiao 7 months ago
parent
a62e355f4c
commit
b32daeab69
7 changed files with 281 additions and 143 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 131
      src/assets/styles/index.scss
  2. 7
      src/components/echart/barEcharts.vue
  3. 19
      src/components/echart/lineChart.vue
  4. 8
      src/components/echart/yearCircle.vue
  5. 55
      src/utils/resizeMixins.js
  6. 53
      src/views/map/index.vue
  7. 151
      src/views/pageThree/index.vue

131
src/assets/styles/index.scss
View File

@ -1102,8 +1102,7 @@
overflow: hidden;
}
.lib-text{
position: absolute;
// transition: top 1s linear;
position: relative;
margin-right: .175rem;
font-size: .225rem;
line-height: .35rem;
@ -1111,6 +1110,22 @@
overflow: hidden;
}
}
.lib-animation {
animation: myLib 26s linear infinite;
animation-fill-mode: forwards;
}
@keyframes myLib {
0% {
transform: translateY(1rem);
}
100% {
transform: translateY(calc(-1 * var(--container-height)));
}
}
.map-hx-bg{
width: 16.325rem;
height: 11.3125rem;
@ -1500,21 +1515,23 @@
text-indent: 2em;
}
}
.scroll-animation {
animation: myMove 16s linear infinite;
animation-fill-mode: forwards;
}
}
}
@keyframes myMove {
0% {
transform: translateY(1rem);
}
100% {
transform: translateY(calc(-1 * var(--container-height)));
}
}
.scroll-animation {
animation: myMove 16s linear infinite;
animation-fill-mode: forwards;
}
@keyframes myMove {
0% {
transform: translateY(1rem);
}
100% {
transform: translateY(calc(-1 * var(--container-height)));
}
}
.four-ranking{
height: 4.85rem;
&.lending-ranking{
@ -1572,3 +1589,89 @@
text-align: center;
}
}
@media (max-width: 1440px) {
.pageOne-database{
margin-top: .375rem;
height: 6.5rem;
}
.pageOne-book {
.pageOne-book-content {
padding: .375rem 0;
.wechat-code{
width: 4.25rem;
height: 5.5rem;
.wechat-img{
width: 2.25rem;
height: 2.25rem;
line-height: 2.5rem;
}
span{
font-size: .275rem;
}
}
}
}
.scrollBox{
.seamless01{
margin-bottom: .5rem;
}
ul{
height: 2.3rem;
li{
width: 1.625rem;
height: 2.3rem;
margin-right: .7375rem;
.bord{
.book-img{
width: 1.625rem;
height: 2.3rem;
}
}
}
}
}
.page-three {
.three03,
.three04{
height: calc(100vh/2 - 1.375rem);
}
}
.four-video{
width: 16.625rem;
height: calc(100vh - 2.5rem);
background-size: 100% 100%;
}
.el-carousel__container{
height: calc(100vh - 4.5rem);
overflow: hidden;
}
.four-notice{
height: 4rem;
.seamless-warp{
height: 3.25rem;
}
}
.four-contact{
width: 5.9375rem;
height: 2.5rem;
background-size: 100% 100%;
.wechat-img{
width: 1.5rem;
height: 1.5rem;
}
span{
font-size: .275rem;
}
}
}

7
src/components/echart/barEcharts.vue
View File

@ -1,6 +1,6 @@
<template>
<!-- 近七日借阅统计 -->
<div id="main1" ref="chartContainer" :style="{height:height,width:width}" />
<div ref="barContainer" :style="{height:height,width:width}" />
</template>
<script>
@ -55,10 +55,11 @@ export default {
this.$nextTick(() => {
this.initChart()
})
window.addEventListener('resize', this.__resizeHandler)
this.resetPieChartData()
},
methods: {
// 重绘饼图
// 重绘bar
resetPieChartData() {
clearInterval(this.timeRePie)
this.timeRePie = setInterval(() => {
@ -73,7 +74,7 @@ export default {
},
initChart() {
// const dom = document.getElementById('main2')
const dom = this.$refs.chartContainer
const dom = this.$refs.barContainer
this.chart = echarts.init(dom)
this.setOptions(this.chartWeeklyData)
},

19
src/components/echart/lineChart.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="main2" ref="chartContainer" :style="{height:height,width:width}" />
<div ref="lineContainer" :style="{height:height,width:width}" />
</template>
<script>
@ -37,17 +37,11 @@ export default {
mmediate: true,
handler(val) {
setTimeout(() => {
this.setOptions(val)
this.initChart()
}, 100)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
this.resetPiechartDayData()
},
beforeDestroy() {
if (!this.chart) {
return
@ -55,6 +49,13 @@ export default {
this.chart.dispose()
this.chart = null
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
window.addEventListener('resize', this.__resizeHandler)
this.resetPiechartDayData()
},
methods: {
resetPiechartDayData() {
clearInterval(this.timeRePie)
@ -70,7 +71,7 @@ export default {
},
initChart() {
// const dom = document.getElementById('main2')
const dom = this.$refs.chartContainer
const dom = this.$refs.lineContainer
this.chart = echarts.init(dom, 'dark')
this.setOptions(this.chartDayData)
},

8
src/components/echart/yearCircle.vue
View File

@ -87,8 +87,12 @@ export default {
const count = arrCount(optionData)
if (optionData) {
const flag = optionData?.find(item => name === item.name)
if (flag) return [`{name|${name}}`, `{num|${((flag.value / count).toFixed(2)) * 100 + '%'}}`]
} else return name
if (flag) {
const percentage = count > 0 ? ((flag.value / count) * 100).toFixed(0) + '%' : '0%'
return [`{name|${name}}`, `{num|${percentage}}`]
}
}
return name
},
textStyle: {
rich: {

55
src/utils/resizeMixins.js
View File

@ -1,26 +1,55 @@
// 混入代码 resize-mixins.js
import { debounce } from '@/utils/index'
const resizeChartMethod = '$__resizeChartMethod'
import { debounce } from '@/utils'
export default {
data() {
// 在组件内部将图表init的引用映射到chart属性上
return {
chart: null
$_sidebarElm: null,
$_resizeHandler: null
}
},
created() {
window.addEventListener('resize', this[resizeChartMethod], false)
mounted() {
this.$_resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
beforeDestroy() {
window.removeEventListener('reisze', this[resizeChartMethod])
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
// to fixed bug when cached by keep-alive
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
activated() {
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
deactivated() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
methods: {
// 通过lodash的防抖函数来控制resize的频率
[resizeChartMethod]: debounce(function() {
if (this.chart) {
this.chart.resize()
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler)
},
$_destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler)
},
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
}
}, 100)
},
$_initSidebarResizeEvent() {
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
$_destroySidebarResizeEvent() {
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
}
}
}

53
src/views/map/index.vue
View File

@ -42,7 +42,7 @@
</li>
</ul>
<div ref="scrollInfo" class="scroll-container">
<div ref="marquee" class="lib-text" :style="{ top: position + 'px' }">{{ libCurrent && libCurrent.explain }}</div>
<div ref="marquee" class="lib-text" v-html="libCurrent && libCurrent.explain" />
</div>
</div>
</div>
@ -161,29 +161,42 @@ export default {
clearTimeout(this.timeTicket)
clearInterval(this.rankInterval)
clearInterval(this.timer)
localStorage.setItem('libIndexItem', this.libIndex)
localStorage.setItem('libCurrentItem', this.libCurrent)
// localStorage.setItem('libIndexItem', this.libIndex)
// localStorage.setItem('libCurrentItem', this.libCurrent)
localStorage.setItem('countItem', this.count)
this.rankInterval = null
this.timer = null
this.timeTicket = null
},
// startScrolling() {
// this.timer = setInterval(() => {
// this.position -= this.speed
// // 当文字完全滚出容器时，重置位置
// // const containerHeight = document.getElementsByClassName('scroll-container')[0].offsetHeight
// this.$nextTick(() => {
// const containerHeight = this.$refs.scrollInfo.offsetHeight
// const contentHeight = this.$refs.marquee.offsetHeight
// if (contentHeight <= containerHeight) {
// this.position = 20
// } else if (Math.abs(this.position) >= contentHeight) {
// this.position = containerHeight
// }
// })
// }, 120)
// },
startScrolling() {
this.timer = setInterval(() => {
this.position -= this.speed
// 当文字完全滚出容器时，重置位置
// const containerHeight = document.getElementsByClassName('scroll-container')[0].offsetHeight
this.$nextTick(() => {
const containerHeight = this.$refs.scrollInfo.offsetHeight
const contentHeight = this.$refs.marquee.offsetHeight
if (contentHeight <= containerHeight) {
this.position = 20
} else if (Math.abs(this.position) >= contentHeight) {
this.position = containerHeight
}
})
}, 40)
this.$nextTick(() => {
const containerHeight = this.$refs.scrollInfo.offsetHeight
const contentHeight = this.$refs.marquee.offsetHeight
// 设置 CSS 变量 --container-height，以便在 CSS 中使用
this.$refs.marquee.parentElement.style.setProperty('--container-height', `${contentHeight + 30}px`)
if (contentHeight > containerHeight) {
this.$refs.marquee.classList.add('lib-animation')
} else {
this.$refs.marquee.classList.remove('lib-animation')
}
})
},
getReadRanking() {
const params = {
@ -372,12 +385,9 @@ export default {
this.initChart() // 初始化
setTimeout(() => {
this.updateChart() // 更新数据，散点轮播显示
this.startScrolling()
window.addEventListener('resize', debounce(this.resize, 2000)) // 使用事件捕获，由外层向内
}, 300)
if (document.getElementsByClassName('scroll-container')[0]) {
this.startScrolling()
}
}
} else {
this.libInfoData = []
@ -945,6 +955,7 @@ export default {
console.log('_self.libCurrent', _self.libCurrent)
_self.updatePageWithData()
_self.autohover()
_self.startScrolling()
_self.currentIndex = 0
}, 3000)
}

151
src/views/pageThree/index.vue
View File

@ -96,14 +96,14 @@
</div>
<div class="three-item three03">
<div class="database-title">今日借阅趋势</div>
<div class="chart-wrapper" style="width: 11.25rem;height: calc(100% - 35px);">
<div class="chart-wrapper" style="width: 11.25rem; height: calc(100% - 35px);">
<LineChart :chart-day-data="chartDayData" />
</div>
</div>
<div class="three-item three04">
<div class="database-title">近7日借阅统计</div>
<div class="chart-wrapper" style="width: 11.25rem;height: calc(100% - 20px);">
<BarEcharts ref="weeklyRef" :chart-weekly-data="chartWeeklyData" />
<div class="chart-wrapper" style="width: 11.25rem; height: calc(100% - 20px);">
<BarEcharts :chart-weekly-data="chartWeeklyData" />
</div>
</div>
</div>
@ -189,7 +189,7 @@ export default {
}
return num
},
// 获取本年今年借阅情况
// 获取本年/今日借阅情况
getLendingTotal() {
this.todayTotal = []
this.yearTotal = []
@ -297,96 +297,85 @@ export default {
// 今日借还
getTodayJH() {
FetchTodayJH().then(res => {
this.chartDayData = {
timeData: [],
returnData: [],
borrowedData: []
}
const result = res.data
if (result.length !== 0) {
this.chartDayData = {
timeData: [],
returnData: [],
borrowedData: []
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.chartDayData.timeData.push(`${foundItem.logHour}:00`)
this.chartDayData.returnData.push(foundItem.hccDay)
this.chartDayData.borrowedData.push(foundItem.jccDay)
} else {
// 如果没找到对应的 logHour，则将默认值加入 chartDayData
this.chartDayData.timeData.push(`${hour}`)
this.chartDayData.returnData.push(0) // 默认值为 0
this.chartDayData.borrowedData.push(0) // 默认值为 0
}
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.chartDayData.timeData.push(`${foundItem.logHour}:00`)
this.chartDayData.returnData.push(foundItem.hccDay)
this.chartDayData.borrowedData.push(foundItem.jccDay)
} else {
// 如果没找到对应的 logHour，则将默认值加入 chartDayData
this.chartDayData.timeData.push(`${hour}`)
this.chartDayData.returnData.push(0) // 默认值为 0
this.chartDayData.borrowedData.push(0) // 默认值为 0
}
})
} else {
this.chartDayData = {
timeData: [],
returnData: [],
borrowedData: []
}
}
})
}).catch(error => {
console.error('Error', error)
})
},
getWeekJH() {
FetchWeekJH().then(res => {
this.chartWeeklyData = {
date: [],
inchartWeeklyData: [],
outchartWeeklyData: []
}
const result = res.data
if (result.length !== 0) {
// 获取当天日期
const currentDate = new Date()
const today = currentDate.toISOString().slice(0, 10)
// 根据数据排除当天的数据
const filteredData = result.filter(entry => {
const entryDate = new Date(entry.createTime).toISOString().slice(0, 10)
return entryDate !== today
})
// 获取过去一周的
const pastWeekDates = []
for (let i = 1; i <= 7; i++) {
const date = new Date()
date.setDate(currentDate.getDate() - i)
pastWeekDates.push(date.toISOString().slice(0, 10))
}
// 获取当天日期
const currentDate = new Date()
const today = currentDate.toISOString().slice(0, 10)
// 根据数据排除当天的数据
const filteredData = result.filter(entry => {
const entryDate = new Date(entry.createTime).toISOString().slice(0, 10)
return entryDate !== today
})
// 获取过去一周的
const pastWeekDates = []
for (let i = 1; i <= 7; i++) {
const date = new Date()
date.setDate(currentDate.getDate() - i)
pastWeekDates.push(date.toISOString().slice(0, 10))
}
const matchData = filteredData.reduce((accData, item) => {
// 根据已有的数据获取相关日期
const entryDate = new Date(item.createTime).toISOString().slice(0, 10)
if (accData[entryDate]) {
accData[entryDate].jccDayTotal += item.jccDayTotal
accData[entryDate].hccDayTotal += item.hccDayTotal
} else {
accData[entryDate] = {
jccDayTotal: item.jccDayTotal,
hccDayTotal: item.hccDayTotal
}
const matchData = filteredData.reduce((accData, item) => {
// 根据已有的数据获取相关日期
const entryDate = new Date(item.createTime).toISOString().slice(0, 10)
if (accData[entryDate]) {
accData[entryDate].jccDayTotal += item.jccDayTotal
accData[entryDate].hccDayTotal += item.hccDayTotal
} else {
accData[entryDate] = {
jccDayTotal: item.jccDayTotal,
hccDayTotal: item.hccDayTotal
}
return accData
}, {})
}
return accData
}, {})
const completeData = pastWeekDates.map(date => ({
date: date.split('-').join('/'),
jccDayTotal: matchData[date] ? matchData[date].jccDayTotal : 0,
hccDayTotal: matchData[date] ? matchData[date].hccDayTotal : 0
}))
const completeData = pastWeekDates.map(date => ({
date: date.split('-').join('/'),
jccDayTotal: matchData[date] ? matchData[date].jccDayTotal : 0,
hccDayTotal: matchData[date] ? matchData[date].hccDayTotal : 0
}))
// 根据时间排序
completeData.sort((a, b) => new Date(a.date) - new Date(b.date))
// 根据时间排序
completeData.sort((a, b) => new Date(a.date) - new Date(b.date))
// 日期X轴数据
this.chartWeeklyData.date = completeData.map(item => item.date)
// in 归还
this.chartWeeklyData.inchartWeeklyData = completeData.map(item => item.hccDayTotal)
// // out 借出
this.chartWeeklyData.outchartWeeklyData = completeData.map(item => item.jccDayTotal)
} else {
this.chartWeeklyData = {
date: [],
inchartWeeklyData: [],
outchartWeeklyData: []
}
}
// 日期X轴数据
this.chartWeeklyData.date = completeData.map(item => item.date)
// in 归还
this.chartWeeklyData.inchartWeeklyData = completeData.map(item => item.hccDayTotal)
// // out 借出
this.chartWeeklyData.outchartWeeklyData = completeData.map(item => item.jccDayTotal)
}).catch(error => {
console.error('Error', error)
})

Write Preview
Loading…
Cancel
Save