|
|
|
@ -1,11 +1,12 @@ |
|
|
|
<template> |
|
|
|
<div style="padding: 0 .4rem;"> |
|
|
|
<div class="pageOne-database"> |
|
|
|
<!-- 到馆统计 --> |
|
|
|
<div class="database-left"> |
|
|
|
<h3 class="database-title">到馆统计</h3> |
|
|
|
<ul class="inLib-num"> |
|
|
|
<li |
|
|
|
v-for="(item, index) in userData" |
|
|
|
v-for="(item, index) in leftData" |
|
|
|
:key="index" |
|
|
|
:class="[{'allTotal': item.id === 'allTotal'}, {'currentNum': item.id === 'currentNum'}]" |
|
|
|
> |
|
|
|
@ -21,7 +22,6 @@ |
|
|
|
<div class="flop-item-name">{{ item.name }}</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<!-- <dv-capsule-chart :config="config" style="width:300px;height:200px" /> --> |
|
|
|
<ul class="pageOne-left-progress"> |
|
|
|
<li v-for="(item,index) in progressdata" :key="index" :class="[{'blue-progress':item.type===1 || item.type === 2},{'orange-progress':item.type===3 || item.type === 4}]"> |
|
|
|
<p>{{ item.name }}</p> |
|
|
|
@ -30,54 +30,76 @@ |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<div class="database-middle">中间大数据</div> |
|
|
|
<!-- 中间大数据 --> |
|
|
|
<div class="database-middle"> |
|
|
|
<img src="~@/assets/images/database-img1.png" alt=""> |
|
|
|
<div v-for="(item,index) in middleData" :key="index" :class="['middle-item', {'totalBook': item.id === 'totalBook'}, {'fansNum': item.id === 'fansNum'}, {'lendingNum': item.id === 'lendingNum'}, {'cardNum': item.id === 'cardNum'}]"> |
|
|
|
<p>{{ item.name }}</p> |
|
|
|
<div class="small-module"> |
|
|
|
<div class="chartNum"> |
|
|
|
<div class="box-items"> |
|
|
|
<li v-for="(e,i) in item.valueArr" :key="i" class="number-item"> |
|
|
|
<span><i ref="numberItem" class="item">0123456789</i></span> |
|
|
|
</li> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 热门搜索 --> |
|
|
|
<div class="database-right"> |
|
|
|
<h3 class="database-title">热门搜索</h3> |
|
|
|
<div id="tagcloud1" class="tagcloud"> |
|
|
|
<p v-for="(item,index) in hotTagData" :key="index" class="color1"> |
|
|
|
<p v-for="(item,index) in hotTagData" :key="index" :class="'color' + ((index % 4) + 1)"> |
|
|
|
<span>{{ item }}</span> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 底部 图书推荐 --> |
|
|
|
<div class="pageOne-book"> |
|
|
|
<div class="scrollBox"> |
|
|
|
<p>第一行书</p> |
|
|
|
<vue-seamless-scroll |
|
|
|
ref="listData" |
|
|
|
:data="list" |
|
|
|
:class-option="defaultOption" |
|
|
|
style="height: 100px; overflow: hidden" |
|
|
|
> |
|
|
|
<ul> |
|
|
|
<li v-for="(item, index) in list" :key="index"> |
|
|
|
<div class="bord"> |
|
|
|
{{ index }} |
|
|
|
<div class="book-img"> |
|
|
|
<img :src="item.cover" :onerror="defaultImg"> |
|
|
|
<h3 class="database-title">图书推荐</h3> |
|
|
|
<div class="pageOne-book-content"> |
|
|
|
<div class="scrollBox"> |
|
|
|
<vue-seamless-scroll |
|
|
|
ref="listData" |
|
|
|
:data="list" |
|
|
|
:class-option="defaultOption" |
|
|
|
class="seamless01" |
|
|
|
> |
|
|
|
<ul> |
|
|
|
<li v-for="(item, index) in list" :key="index"> |
|
|
|
<div class="bord"> |
|
|
|
<div class="book-img"> |
|
|
|
<img :src="item.cover" :onerror="defaultImg"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</vue-seamless-scroll> |
|
|
|
<p>第二行书</p> |
|
|
|
<vue-seamless-scroll |
|
|
|
ref="listData2" |
|
|
|
:data="list" |
|
|
|
:class-option="default2Option" |
|
|
|
style="height: 100px; overflow: hidden" |
|
|
|
> |
|
|
|
<ul> |
|
|
|
<li v-for="(item, index) in list" :key="index"> |
|
|
|
<div class="bord"> |
|
|
|
{{ index }} |
|
|
|
<div class="book-img"> |
|
|
|
<img :src="item.cover" :onerror="defaultImg"> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</vue-seamless-scroll> |
|
|
|
<vue-seamless-scroll |
|
|
|
ref="listData2" |
|
|
|
:data="list" |
|
|
|
:class-option="default2Option" |
|
|
|
class="seamless02" |
|
|
|
> |
|
|
|
<ul> |
|
|
|
<li v-for="(item, index) in list" :key="index"> |
|
|
|
<div class="bord"> |
|
|
|
<div class="book-img"> |
|
|
|
<img :src="item.cover" :onerror="defaultImg"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</vue-seamless-scroll> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</vue-seamless-scroll> |
|
|
|
</div> |
|
|
|
<div class="wechat-code"> |
|
|
|
<div class="wechat-img"> |
|
|
|
二维码 |
|
|
|
</div> |
|
|
|
<span>微信扫一扫关注</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -91,8 +113,8 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
list: [], |
|
|
|
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"', |
|
|
|
userData: [], |
|
|
|
defaultImg: 'this.src="' + require('@/assets/images/book_03.png') + '"', |
|
|
|
leftData: [], |
|
|
|
progressdata: [ |
|
|
|
{ |
|
|
|
name: '今日到馆', |
|
|
|
@ -115,7 +137,9 @@ export default { |
|
|
|
type: 4 |
|
|
|
} |
|
|
|
], |
|
|
|
hotTagData: ['呼啸山庄', '大卫·科波菲尔', '百年孤独', '孙子兵法', '傲慢与偏见', '钢铁是怎样炼成的', '世界上下五千年', '明朝那些事', '呼啸山庄', '大卫·科波菲尔', '百年孤独', '孙子兵法', '傲慢与偏见', '钢铁是怎样炼成的', '世界上下五千年', '明朝那些事'] |
|
|
|
hotTagData: ['呼啸山庄', '大卫·科波菲尔', '百年孤独', '孙子兵法', '傲慢与偏见', '钢铁是怎样炼成的', '世界上下五千年', '明朝那些事', '呼啸山庄', '大卫·科波菲尔', '百年孤独', '孙子兵法', '傲慢与偏见', '钢铁是怎样炼成的', '世界上下五千年', '明朝那些事'], |
|
|
|
colors: ['color1', 'color2', 'color3', 'color4'], // 热门搜索四种颜色 |
|
|
|
middleData: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -156,7 +180,6 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.list = data |
|
|
|
@ -168,6 +191,7 @@ export default { |
|
|
|
// 获取全用户数据 |
|
|
|
setTimeout(() => { |
|
|
|
this.initDataPreview() |
|
|
|
this.ininMiddleData() |
|
|
|
}, 700) |
|
|
|
this.tagAnimation() |
|
|
|
}, |
|
|
|
@ -191,11 +215,11 @@ export default { |
|
|
|
tagAnimation() { |
|
|
|
tagCloud({ |
|
|
|
selector: '#tagcloud1', // 元素选择器，id 或 class |
|
|
|
fontsize: 24, // 基本字体大小, 默认16，单位px |
|
|
|
radius: 360, // 滚动横/纵轴半径, 默认60，单位px，取值60，[60]，[60, 60] |
|
|
|
fontsize: 22, // 基本字体大小, 默认16，单位px |
|
|
|
radius: 340, // 滚动横/纵轴半径, 默认60，单位px，取值60，[60]，[60, 60] |
|
|
|
mspeed: 'normal', // 滚动最大速度, 取值: slow, normal(默认), fast |
|
|
|
ispeed: 'normal', // 滚动初速度, 取值: slow, normal(默认), fast |
|
|
|
direction: 135, // 初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)... |
|
|
|
direction: 45, // 初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)... |
|
|
|
keep: false, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动 |
|
|
|
multicolour: false // 彩色字体，颜色随机，取值：true(默认),false |
|
|
|
}) |
|
|
|
@ -213,8 +237,8 @@ export default { |
|
|
|
} |
|
|
|
if (previewData.code !== 0) return |
|
|
|
this.allUserNumCount = previewData.data.allUserNumCount |
|
|
|
this.userData = [] |
|
|
|
this.userData.push({ |
|
|
|
this.leftData = [] |
|
|
|
this.leftData.push({ |
|
|
|
id: 'allTotal', |
|
|
|
name: '本年累计到馆', |
|
|
|
value: this.$parent.formatter(previewData.data.allUserNumCount), |
|
|
|
@ -225,12 +249,48 @@ export default { |
|
|
|
value: this.$parent.formatter(previewData.data.allUserOpenNumCount), |
|
|
|
valueArr: this.$parent.formatter(previewData.data.allUserOpenNumCount).split('') |
|
|
|
}) |
|
|
|
console.log('userData', this.userData) |
|
|
|
setTimeout(() => { |
|
|
|
this.$parent.timedRefresh(this.userData, 'user') |
|
|
|
this.$parent.timedRefresh(this.leftData, 'left') |
|
|
|
}, 1000) |
|
|
|
} |
|
|
|
}, |
|
|
|
ininMiddleData() { |
|
|
|
const previewData = { |
|
|
|
'code': 0, |
|
|
|
'data': { |
|
|
|
'number1': 679363, |
|
|
|
'number2': 5927, |
|
|
|
'number3': 34798, |
|
|
|
'number4': 30541 |
|
|
|
}, |
|
|
|
'message': 'success' |
|
|
|
} |
|
|
|
this.middleData = [] |
|
|
|
this.middleData.push({ |
|
|
|
id: 'totalBook', |
|
|
|
name: '藏书总量', |
|
|
|
value: previewData.data.number1, |
|
|
|
valueArr: previewData.data.number1.toString().split('') |
|
|
|
}, { |
|
|
|
id: 'fansNum', |
|
|
|
name: '粉丝数量', |
|
|
|
value: previewData.data.number2, |
|
|
|
valueArr: previewData.data.number2.toString().split('') |
|
|
|
}, { |
|
|
|
id: 'lendingNum', |
|
|
|
name: '累计借出', |
|
|
|
value: previewData.data.number3, |
|
|
|
valueArr: previewData.data.number3.toString().split('') |
|
|
|
}, { |
|
|
|
id: 'cardNum', |
|
|
|
name: '累计办证', |
|
|
|
value: previewData.data.number4, |
|
|
|
valueArr: previewData.data.number4.toString().split('') |
|
|
|
}) |
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
this.$parent.timedRefresh(this.middleData, 'middle') |
|
|
|
}, 1000) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -238,44 +298,80 @@ export default { |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
@import "~@/assets/styles/index.scss"; |
|
|
|
@import "~@/assets/styles/font-some.css"; |
|
|
|
.tagcloud { |
|
|
|
width: 5rem; |
|
|
|
height: 5rem; |
|
|
|
margin: 0 0 0 .45rem; |
|
|
|
margin: 0 0 0 .325rem; |
|
|
|
overflow: hidden; |
|
|
|
p{ |
|
|
|
border-top: 2px dotted #1F6374; |
|
|
|
border-left: 2px dotted #184D61; |
|
|
|
border-right: 2px dotted #184D61; |
|
|
|
border-bottom: 2px dotted RGBA(24, 77, 97, 0.3); |
|
|
|
padding: .0625rem; |
|
|
|
border-bottom: 2px dashed rgba(24, 77, 97, 0.5); |
|
|
|
span{ |
|
|
|
display: block; |
|
|
|
padding: .075rem 8px; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
&.color1{ |
|
|
|
border-top: 2px dashed #1F6374; |
|
|
|
border-left: 3px dashed #184D61; |
|
|
|
border-right: 3px dashed #184D61; |
|
|
|
span{ |
|
|
|
border: 1px solid #30ADA6; |
|
|
|
background-color: #106B66; |
|
|
|
color: #51EAE2; |
|
|
|
z-index: 99; |
|
|
|
} |
|
|
|
} |
|
|
|
&.color2{ |
|
|
|
border-top: 2px dashed #203F7F; |
|
|
|
border-left: 3px dashed #102857; |
|
|
|
border-right: 3px dashed #102857; |
|
|
|
span{ |
|
|
|
border: 1px solid #3A64BE; |
|
|
|
background: rgba(16,45,107,0.7); |
|
|
|
color: #7EA7FF; |
|
|
|
} |
|
|
|
} |
|
|
|
&.color3{ |
|
|
|
border-top: 2px dashed #613689; |
|
|
|
border-left: 3px dashed #4C2E75; |
|
|
|
border-right: 3px dashed #4C2E75; |
|
|
|
span{ |
|
|
|
border: 1px solid #9439B6; |
|
|
|
background: rgba(74,18,95,0.8); |
|
|
|
color: #CD63F4; |
|
|
|
} |
|
|
|
} |
|
|
|
&.color4{ |
|
|
|
border-top: 2px dashed #6A5735; |
|
|
|
border-left: 3px dashed #655435; |
|
|
|
border-right: 3px dashed #655435; |
|
|
|
span{ |
|
|
|
border: 1px solid #C2943C; |
|
|
|
background: rgba(107,76,16,0.7); |
|
|
|
color: #F4C263; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.scrollBox{ |
|
|
|
width: 100%; |
|
|
|
height: 96px; |
|
|
|
flex: 1; |
|
|
|
height: calc(100%); |
|
|
|
box-sizing: border-box; |
|
|
|
margin-left: 0.45rem; |
|
|
|
overflow: hidden; |
|
|
|
.seamless01{ |
|
|
|
margin-bottom: .35rem; |
|
|
|
} |
|
|
|
ul{ |
|
|
|
height: 96px; |
|
|
|
display: flex; |
|
|
|
height: 2rem; |
|
|
|
overflow: hidden; |
|
|
|
li{ |
|
|
|
width: 240px; |
|
|
|
margin-right: 10px; |
|
|
|
border: solid 2px #f7f7f9; |
|
|
|
width: 1.375rem; |
|
|
|
height: 2rem; |
|
|
|
margin-right: .7375rem; |
|
|
|
cursor: pointer; |
|
|
|
.bord{ |
|
|
|
display: flex; |
|
|
|
@ -283,9 +379,9 @@ export default { |
|
|
|
justify-content: space-around; |
|
|
|
align-items: center; |
|
|
|
.book-img{ |
|
|
|
width: .5rem; |
|
|
|
height: .5rem; |
|
|
|
background: url('~@/assets/images/default-img.png') no-repeat center center; |
|
|
|
width: 1.375rem; |
|
|
|
height: 2rem; |
|
|
|
background: url('~@/assets/images/book_03.png') no-repeat center center; |
|
|
|
background-size: contain; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -298,6 +394,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</style> |
