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. 117
      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. 43
      src/views/map/index.vue
  7. 33
      src/views/pageThree/index.vue

117
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 {
}
}
.scroll-animation {
animation: myMove 16s linear infinite;
animation-fill-mode: forwards;
}
}
@keyframes myMove {
@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()
}
},
$_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)
}
}, 100)
}
}

43
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
// 设置 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')
}
})
}, 40)
},
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)
}

33
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,13 +297,12 @@ export default {
// 今日借还
getTodayJH() {
FetchTodayJH().then(res => {
const result = res.data
if (result.length !== 0) {
this.chartDayData = {
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
@ -320,21 +319,18 @@ export default {
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)
@ -371,22 +367,15 @@ export default {
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))
// 日期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: []
}
}
}).catch(error => {
console.error('Error', error)
})

Write Preview
Loading…
Cancel
Save