diff --git a/src/assets/images/circle-bg.png b/src/assets/images/circle-bg.png new file mode 100644 index 0000000..67657f7 Binary files /dev/null and b/src/assets/images/circle-bg.png differ diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 9360860..203c476 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -266,55 +266,19 @@ background: url('~@/assets/images/database-icon2.png') no-repeat left top; background-size: 100% 100%; } -} - -.flop-figure { - position: relative; - display: inline-block; - width: .275rem; - height: 100%; - line-height: .175rem; - overflow: hidden; - writing-mode: vertical-lr; - text-orientation: upright; - i{ - position: absolute; - text-align: center; - transition: transform 0.6s ease-in-out; - color: #fff; - background: -webkit-linear-gradient(90deg, rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%); - background: linear-gradient(90deg, rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - text-shadow: 0 2px 8px rgba(5,28,55,0.42); - } -} - -.pageLeft-flop-box { - position: relative; - height: .325rem; - margin-top: .125rem; - overflow: hidden; - & div:first-child { - height: .325rem; - overflow: hidden; - display: flex; - align-items: center; - justify-content: flex-start; - } - .flop-figure { - width: .275rem; - i { - font-size: .275rem; - font-weight: bold; - } - } - .flop-comma { - margin-left: -0.025rem; - span { - left: 0; - font-size: .275rem; + .flop-figure { + position: relative; + display: inline-block; + width: .275rem; + height: 100%; + line-height: .175rem; + overflow: hidden; + writing-mode: vertical-lr; + text-orientation: upright; + i{ + position: absolute; + text-align: center; + transition: transform 0.6s ease-in-out; color: #fff; background: -webkit-linear-gradient(90deg, rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%); background: linear-gradient(90deg, rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%); @@ -322,19 +286,56 @@ background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 8px rgba(5,28,55,0.42); - } - } - & em{ - font-style: normal; - font-size: .175rem; - font-weight: bold; - color: #A8CBF6; - height: .375rem; + } + } + .pageLeft-flop-box { + position: relative; + height: .325rem; + margin-top: .125rem; + overflow: hidden; + & div:first-child { + height: .325rem; + overflow: hidden; + display: flex; + align-items: center; + justify-content: flex-start; + } + .flop-figure { + width: .275rem; + i { + font-size: .275rem; + font-weight: bold; + } + } + .flop-comma { + margin-left: -0.025rem; + span { + left: 0; + font-size: .275rem; + color: #fff; + background: -webkit-linear-gradient(90deg, rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%); + background: linear-gradient(90deg, rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + text-shadow: 0 2px 8px rgba(5,28,55,0.42); + } + } + & em{ + font-style: normal; + font-size: .175rem; + font-weight: bold; + color: #A8CBF6; + height: .375rem; + } + } + .flop-item-name{ + font-size: .1875rem; } } -.flop-item-name{ - font-size: .1875rem; -} + + + // 左边进度条 @@ -699,73 +700,74 @@ } } } - .lending-ranking{ - padding: 0 .2625rem 0 .425rem; - h5{ - font-size: .225rem; - color: #79B8FF; - margin-bottom: .25rem; - } - .ranking-cont{ - // height: calc(100vh - 6.875rem); - background: linear-gradient(-90deg, rgba(66,139,221,0.1), rgba(66,139,221,0)); - border: 1px solid rgba(83, 196, 255, .2); - padding-bottom: .375rem; + +} +.lending-ranking{ + padding: 0 .2625rem 0 .425rem; + h5{ + font-size: .225rem; + color: #79B8FF; + margin-bottom: .25rem; + } + .ranking-cont{ + // height: calc(100vh - 6.875rem); + background: linear-gradient(-90deg, rgba(66,139,221,0.1), rgba(66,139,221,0)); + border: 1px solid rgba(83, 196, 255, .2); + padding-bottom: .375rem; + } + .ranking-title{ + display: flex; + justify-content: space-around; + text-align: center; + align-items: center; + font-size: .15rem; + color: #79B8FF; + background: linear-gradient(90deg, rgba(66,139,221,0.2), rgba(66,139,221,0)); + li { + &:last-child{ + width: 1.375rem; + } } - .ranking-title{ + } + .ranking-list{ + li{ display: flex; justify-content: space-around; + font-size: .175rem; + color: #eef6ff; + line-height: .375rem; + padding-top: .125rem; text-align: center; - align-items: center; - font-size: .15rem; - color: #79B8FF; - background: linear-gradient(90deg, rgba(66,139,221,0.2), rgba(66,139,221,0)); - li { + div{ &:last-child{ - width: 1.375rem; + font-weight: bold; } - } - } - .ranking-list{ - li{ - display: flex; - justify-content: space-around; - font-size: .175rem; - color: #eef6ff; - line-height: .375rem; - padding-top: .125rem; - text-align: center; - div{ - &:last-child{ - font-weight: bold; - } - i{ - padding-left: .125rem; - font-style: normal; - font-weight: normal; - color: #b6d4f7; - } - } - .ranking-progress .el-progress{ - width: 1.725rem; - margin: 0 auto; - .el-progress-bar__outer { - background-color: #054076; - } + i{ + padding-left: .125rem; + font-style: normal; + font-weight: normal; + color: #b6d4f7; } - .ranking-num1{ - background: url('~@/assets/images/ranking01.png') no-repeat center center; - background-size: .225rem .3125rem; - } - .ranking-num2{ - background: url('~@/assets/images/ranking02.png') no-repeat center center; - background-size: .225rem .3125rem; - } - .ranking-num3{ - background: url('~@/assets/images/ranking03.png') no-repeat center center; - background-size: .225rem .3125rem; + } + .ranking-progress .el-progress{ + width: 1.725rem; + margin: 0 auto; + .el-progress-bar__outer { + background-color: #054076; } } + .ranking-num1{ + background: url('~@/assets/images/ranking01.png') no-repeat center center; + background-size: .225rem .3125rem; + } + .ranking-num2{ + background: url('~@/assets/images/ranking02.png') no-repeat center center; + background-size: .225rem .3125rem; + } + .ranking-num3{ + background: url('~@/assets/images/ranking03.png') no-repeat center center; + background-size: .225rem .3125rem; + } } } } @@ -833,4 +835,79 @@ .database-title{ width: 6.0375rem; } + .three-lending{ + display: flex; + justify-content: space-between; + padding: .1875rem .3125rem 0 .4125rem; + h5{ + font-size: .2rem; + color: #47A6FF; + } + .three-lending-left{ + .totalItem{ + .pageLeft-flop-box{ + position: relative; + height: .9125rem; + margin: .2875rem 0 .4rem 0; + overflow: hidden; + & div:first-child { + height: .9125rem; + overflow: hidden; + display: flex; + align-items: center; + justify-content: flex-start; + } + .flop-figure { + position: relative; + display: inline-block; + width: .675rem; + height: 100%; + line-height: .625rem; + padding: .125rem 0; + overflow: hidden; + writing-mode: vertical-lr; + text-orientation: upright; + background: rgba(13,145,214,0.25); + margin-right: .1625rem; + border: 2px solid #0D79FF; + border-radius: .05rem; + i { + font-size: .6rem; + font-weight: 600; + position: absolute; + text-align: center; + transition: transform 0.6s ease-in-out; + color: #BFE0FF; + } + } + } + } + } + + .three-lending-right{ + width: 5.25rem; + h5{ + position: relative; + padding-left: .2rem; + &::before{ + content: ""; + position: absolute; + left: 0; + top: 50%; + width: .0625rem; + height: .2rem; + background-color: #47A6FF; + transform: translateY(-50%); + } + } + .ranking-cont{ + padding-bottom: .125rem; + .ranking-list{ + .ranking-progress .el-progress{ + width: 1.25rem; + } + } + } + } + } } \ No newline at end of file diff --git a/src/components/echart/barEcharts.vue b/src/components/echart/barEcharts.vue index 512fb24..02708db 100644 --- a/src/components/echart/barEcharts.vue +++ b/src/components/echart/barEcharts.vue @@ -137,6 +137,31 @@ export default { name: {} } } + // // 获取当前日期 + // var today = new Date() + // // 获取当前周的第一天（如果周一为开始） + // var startDayOfWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - today.getDay() + 1) + // // 创建一个日期数组，包含当天和接下来六天的日期 + // var xAxisData = [] + // for (var i = 0; i < 7; i++) { + // xAxisData.push(new Date(startDayOfWeek.getFullYear(), startDayOfWeek.getMonth(), startDayOfWeek.getDate() + i).toLocaleDateString()) + // } + + // 计算日期数组的函数 + function getLastWeekDates() { + var dates = [] + var today = new Date() + for (var i = 0; i < 7; i++) { + var day = new Date(today - i * 24 * 60 * 60 * 1000) + var dayOfWeek = day.getDay() + if (dayOfWeek === 0) { + day.setTime(day.getTime() - 5 * 24 * 60 * 60 * 1000) + } + dates.unshift(day.toLocaleDateString()) + } + return dates + } + option = { tooltip: { trigger: 'axis', @@ -180,7 +205,7 @@ export default { xAxis: [{ type: 'category', axisTick: { show: false }, - data: this.storageData.storageMonths, + data: getLastWeekDates(), axisLine: { // 轴线的颜色以及宽度 lineStyle: { color: '#113D72' @@ -190,10 +215,7 @@ export default { show: true, textStyle: { color: '#fff' - }, - formatter: this.storageData.storageMonths.map(function(item) { - return item - }) + } }, splitLine: { // 分割线配置 lineStyle: { diff --git a/src/main.js b/src/main.js index a9e1987..42f4ce3 100644 --- a/src/main.js +++ b/src/main.js @@ -13,6 +13,8 @@ import '@/common/flexible.js' import './assets/js/rollSlide.js' import './assets/js/tagcloud-2.2.js' +import './utils/mixins' + // 引入全局css import './assets/fonts/fonts.css' import './assets/iconfont/iconfont.js' diff --git a/src/utils/mixins.js b/src/utils/mixins.js new file mode 100644 index 0000000..3142a7e --- /dev/null +++ b/src/utils/mixins.js @@ -0,0 +1,162 @@ +import Vue from 'vue' + +Vue.mixin({ + methods: { + // 错误 + $LoopShowTooltip(chart, chartOption, options) { + const defaultOptions = { + interval: 2000, + loopSeries: false, + seriesIndex: 0, + updateData: null + } + + if (!chart || !chartOption) { + return {} + } + + let dataIndex = 0 // 数据索引，初始化为-1，是为了判断是否是第一次执行 + let seriesIndex = 0 // 系列索引 + let timeTicket = 0 + const seriesLen = chartOption.series.length // 系列个数 + let dataLen = 0 // 某个系列数据个数 + let chartType // 系列类型 + let first = true + + // 不循环series时seriesIndex指定显示tooltip的系列，不指定默认为0，指定多个则默认为第一个 + // 循环series时seriesIndex指定循环的series，不指定则从0开始循环所有series，指定单个则相当于不循环，指定多个 + // 要不要添加开始series索引和开始的data索引？ + + if (options) { + options.interval = options.interval || defaultOptions.interval + options.loopSeries = options.loopSeries || defaultOptions.loopSeries + options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex + options.updateData = options.updateData || defaultOptions.updateData + } else { + options = defaultOptions + } + + // 如果设置的seriesIndex无效，则默认为0 + if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) { + seriesIndex = 0 + } else { + seriesIndex = options.seriesIndex + } + + function autoShowTip() { + function showTip() { + // 判断是否更新数据 + if (dataIndex === 0 && !first && typeof options.updateData === 'function') { + options.updateData() + chart.setOption(chartOption) + } + + const series = chartOption.series + chartType = series[seriesIndex].type // 系列类型 + dataLen = series[seriesIndex].data.length // 某个系列的数据个数 + + const tipParams = { seriesIndex: seriesIndex } + switch (chartType) { + case 'map': + case 'pie': + case 'chord': + tipParams.name = series[seriesIndex].data[dataIndex].name + break + case 'radar': // 雷达图 + tipParams.seriesIndex = seriesIndex + tipParams.dataIndex = dataIndex + break + default: + tipParams.dataIndex = dataIndex + break + } + + if (chartType === 'pie' || chartType === 'radar') { + // 取消之前高亮的图形 + chart.dispatchAction({ + type: 'downplay', + seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex, + dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1 + }) + + // 高亮当前图形 + chart.dispatchAction({ + type: 'highlight', + seriesIndex: seriesIndex, + dataIndex: dataIndex + }) + } + + // 显示 tooltip + tipParams.type = 'showTip' + chart.dispatchAction(tipParams) + + dataIndex = (dataIndex + 1) % dataLen + if (options.loopSeries && dataIndex === 0 && !first) { // 数据索引归0表示当前系列数据已经循环完 + seriesIndex = (seriesIndex + 1) % seriesLen + } + + first = false + } + + showTip() + timeTicket = setInterval(showTip, options.interval) + } + + // 关闭轮播 + function stopAutoShow() { + if (timeTicket) { + clearInterval(timeTicket) + timeTicket = 0 + + if (chartType === 'pie' || chartType === 'radar') { + // 取消高亮的图形 + chart.dispatchAction({ + type: 'downplay', + seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex, + dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1 + }) + } + } + } + + const zRender = chart.getZr() + + function zRenderMouseMove(param) { + if (param.event) { + // 阻止canvas上的鼠标移动事件冒泡 + param.event.cancelBubble = true + } + + stopAutoShow() + } + + // 离开echarts图时恢复自动轮播 + function zRenderGlobalOut() { + if (!timeTicket) { + autoShowTip() + } + } + + // 鼠标在echarts图上时停止轮播 + chart.on('mousemove', stopAutoShow) + zRender.on('mousemove', zRenderMouseMove) + zRender.on('globalout', zRenderGlobalOut) + + autoShowTip() + + return { + clearLoop: function() { + if (timeTicket) { + clearInterval(timeTicket) + timeTicket = 0 + } + + chart.off('mousemove', stopAutoShow) + zRender.off('mousemove', zRenderMouseMove) + zRender.off('globalout', zRenderGlobalOut) + } + } + } + } +}) diff --git a/src/views/index.vue b/src/views/index.vue index ca2dcf3..91d00a6 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -41,7 +41,7 @@ export default { }, data() { return { - active: 3, + active: 1, isLoading: false, fullscreen: false, height: '', @@ -87,7 +87,7 @@ export default { clearInterval(this.timer2) window.removeEventListener('resize', this.setElementHeight) }) - // this.autoPagination() + this.autoPagination() }, methods: { autoPagination() { @@ -161,20 +161,31 @@ export default { let leftTimer let middleTimer let deviceTimer + let todayTimer + let yearTimer if (type === 'middle') { middleTimer = this.initInterval2(targetList, 8000) } else if (type === 'left') { leftTimer = this.initInterval(targetList, 10000) } else if (type === 'device') { deviceTimer = this.initInterval(targetList, 8000) + } else if (type === 'todayTotal') { + todayTimer = this.initInterval(targetList, 8000) + } else if (type === 'yearTotal') { + yearTimer = this.initInterval(targetList, 10000) } + this.$once('hook:beforeDestroy', () => { clearInterval(leftTimer) clearInterval(middleTimer) clearInterval(deviceTimer) + clearInterval(todayTimer) + clearInterval(yearTimer) middleTimer = null leftTimer = null deviceTimer = null + todayTimer = null + yearTimer = null }) }, setNumberTransform2(item) { diff --git a/src/views/map/index.vue b/src/views/map/index.vue index 21cf336..6bec9a9 100644 --- a/src/views/map/index.vue +++ b/src/views/map/index.vue @@ -56,19 +56,19 @@
借阅Top10
@@ -137,7 +137,7 @@ export default { { id: 6, num: 140, name: '胡图图' }, { id: 7, num: 120, name: '胡图图' }, { id: 8, num: 100, name: '胡图图' }, - { id: 9, num: 70, name: '胡图图' }, + { id: 9, num: 70, name: '胡1' }, { id: 10, num: 60, name: '胡图图' } ], rankingWithPercentage: [] @@ -168,8 +168,17 @@ export default { methods: { rankingDataComputed() { const firstPlaceNum = this.rankingData[0].num - this.rankingWithPercentage = this.rankingData.map(item => { + if (item.name.length === 2) { + // 截取name 字符串截取第一个字符， + item.name = item.name.substring(0, 1) + ' * ' + } else if (item.name.length === 3) { + // 截取第一个和第三个字符 + item.name = item.name.substring(0, 1) + ' * ' + item.name.substring(2, 3) + } else if (item.name.length > 3) { + // 截取第一个和大于第4个字符 + item.name = item.name.substring(0, 1) + ' * ' + ' * ' + item.name.substring(3, item.name.length) + } const percentage = (item.num / firstPlaceNum) * 100 return { ...item, percentage } }) diff --git a/src/views/pageOne/index.vue b/src/views/pageOne/index.vue index b119017..e81e7e7 100644 --- a/src/views/pageOne/index.vue +++ b/src/views/pageOne/index.vue @@ -224,7 +224,6 @@ export default { multicolour: false // 彩色字体，颜色随机，取值：true(默认),false }) }, - initDataPreview() { // 数据概览 const previewData = { diff --git a/src/views/pageThree/index.vue b/src/views/pageThree/index.vue index 3417e27..dd19945 100644 --- a/src/views/pageThree/index.vue +++ b/src/views/pageThree/index.vue @@ -3,9 +3,95 @@
本年累计借阅数量
+
+
+
本年累计借阅
+
    +
  • +
    +
    + + 0123456789 + + +
    +
    +
    • +
+ +
+
+
分馆累计借阅排行榜
+
+
    +
  • 排名
    • +
  • 学院名称
    • +
  • +
  • 借阅数量
    • +
+
    +
  • +
    {{ index>=3 ? index+1 : null }}
    +
    {{ item.name }}
    +
    + +
    +
    {{ item.num }}本
    +
    • +
+
+
+
今日借阅数量
+
+
+
今日累计借阅
+
    +
  • +
    +
    + + 0123456789 + + +
    +
    +
    • +
+ +
+
+
分馆今日借阅排行榜
+
+
    +
  • 排名
    • +
  • 学院名称
    • +
  • +
  • 借阅数量
    • +
+
    +
  • +
    {{ index>=3 ? index+1 : null }}
    +
    {{ item.name }}
    +
    + +
    +
    {{ item.num }}本
    +
    • +
+
+
+
今日借阅趋势
@@ -26,10 +112,14 @@ + + diff --git a/src/views/pageThree/module/yearCircle.vue b/src/views/pageThree/module/yearCircle.vue new file mode 100644 index 0000000..b93f4cb --- /dev/null +++ b/src/views/pageThree/module/yearCircle.vue @@ -0,0 +1,206 @@ + + + + +