大屏-api/style

src/api/library.js

@@ -19,7 +19,45 @@ export function FetchBorrowRank(params) {
   })
 }
 
+// 阅读之星
+export function FetchBorrowStar(params) {
+  return request({
+    url: '/txhtsg/borrowStar',
+    method: 'get',
+    params: params
+  })
+}
+
+// 新书推荐
+export function FetchNewBookRecommend(params) {
+  return request({
+    url: '/txhtsg/newBookRecommend',
+    method: 'get',
+    params: params
+  })
+}
+
+// 通知公告
+export function FetchInitNotice(params) {
+  return request({
+    url: '/txhtsg/initNotice',
+    method: 'get',
+    params: params
+  })
+}
+
+// 进馆人数
+export function FetchInitIntoNum(params) {
+  return request({
+    url: '/txhtsg/initIntoNum',
+    method: 'get',
+    params: params
+  })
+}
+
 export default {
   FetchHalfYearBorrowNum,
-  FetchBorrowRank
+  FetchBorrowRank,
+  FetchBorrowStar,
+  FetchNewBookRecommend
 }

src/assets/styles/_variables.scss

@@ -1,97 +0,0 @@
-// 颜色
-$colors: (
-  "primary": #db9e3f,
-  "info-1": #4394e4,
-  "info": #4b67af,
-  "white": #ffffff,
-  "light": #f9f9f9,
-  "grey-1": #999999,
-  "grey": #666666,
-  "dark-1": #5f5f5f,
-  "dark": #222222,
-  "black-1": #171823,
-  "black": #000000,
-);
-
-// 字体大小
-$base-font-size: 0.2rem;
-$font-sizes: (
-  xxs: 0.1,
-  //8px
-    xs: 0.125,
-  //10px
-    sm: 0.2875,
-  //12px
-    md: 0.1625,
-  //13px
-    lg: 0.175,
-  //14px
-    xl: 0.2,
-  //16px
-    xxl: 0.225,
-  //18px
-    xxxl: 0.25
-);
-
-// 宽高
-.w-100 {
-  width: 100%;
-}
-.h-100 {
-  height: 100%;
-}
-
-//flex
-.d-flex {
-  display: flex;
-}
-.flex-column {
-  flex-direction: column;
-}
-.flex-wrap {
-  flex-wrap: wrap;
-}
-.flex-nowrap {
-  flex-wrap: nowrap;
-}
-$flex-jc: (
-  start: flex-start,
-  end: flex-end,
-  center: center,
-  between: space-between,
-  around: space-around,
-  evenly: space-evenly,
-);
-
-$flex-ai: (
-  start: flex-start,
-  end: flex-end,
-  center: center,
-  stretch: stretch,
-);
-
-.flex-1 {
-  flex: 1;
-}
-
-//.mt-1 => margin top
-//spacing
-$spacing-types: (
-  m: margin,
-  p: padding,
-);
-$spacing-directions: (
-  t: top,
-  r: right,
-  b: bottom,
-  l: left,
-);
-$spacing-base-size: 0.2rem;
-$spacing-sizes: (
-  0: 0,
-  1: 0.25,
-  2: 0.5,
-  3: 1,
-  4: 1.5,
-  5: 3,
-);

src/assets/styles/ball-running-animate.css

@@ -26,8 +26,8 @@
 	border: 0 solid currentColor;
 }
 .ball-running-dots {
-	width: 12px;
-	height: 12px;
+	width: 16px;
+	height: 16px;
 }
 .ball-running-dots > div {
 	position: absolute;
@@ -56,7 +56,7 @@
 	0%{
 		width: 100%;
 		height: 100%;
-		transform: translateY(0) translateX(-500%) scale(50%,50%);
+		transform: translateY(0) translateX(-500%) scale(-.1);
     opacity: 0.5;
 	}
 	80% {
@@ -79,7 +79,7 @@
   100% {
     width: 100%;
 		height: 100%;
-		transform: translateY(0) translateX(-500%) scale(50%,50%);
+		transform: translateY(0) translateX(-500%);
     opacity: 1;
 	}
 }
@@ -87,7 +87,7 @@
 	0%{
 		width: 100%;
 		height: 100%;
-		transform: translateY(0) translateX(500%) scale(50%,50%);
+		transform: translateY(0) translateX(500%) scale(-.1);
     opacity: 0.5;
 	}
 	80% {

src/assets/styles/index.scss

@@ -166,10 +166,16 @@
     align-items: center;
     padding: 0.1rem 0.25rem;
     .book-img{
-      display: block;
       width: 0.825rem;
       height: 1.075rem;
       margin-right: 0.35rem;
+      background: url('~@/assets/images/default-img.png') no-repeat center center;
+      background-size: contain;
+      img{
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
     }
     .book-info{
       flex: 1;
@@ -298,18 +304,32 @@
     .module-content{
       display: flex;
       justify-content: space-between;
+      width: 100%;
       padding: 0.25rem 0.375rem 0.5rem 0.375rem;
       .notice-icon-gif{
         display: block;
-        width: 3.375rem;
+        width: 2.375rem;
         height: 2.875rem;
         background: url('~@/assets/images/notice.gif') no-repeat left top;
         background-size: contain;
         margin-right: 0.15rem;
       }
       .seamless-warp{
+        width: calc(100vw);
         height: 3.1rem;
         overflow: hidden;
+        .notice-txt {
+          animation: myMove 20s linear infinite;
+          animation-fill-mode: forwards;
+        }
+        @keyframes myMove {
+          0% {
+            transform: translateY(2rem);
+          }
+          100% {
+            transform: translateY(-6rem);
+          }
+        }
       }
     }
   }

src/assets/styles/style.scss

@@ -1,4 +1,3 @@
-@import "./variables";
 @import '~@/assets/iconfont/iconfont.css';
 
 //  全局样式
@@ -35,6 +34,13 @@ ul{
   }
 }
 
+img[src=""],img:not([src]){
+  opacity: 0;
+  border:none;
+  visibility: hidden;
+  max-width: none;
+}
+
 .clearfix {
   &::after {
     content: "";

src/components/echart/lineChartService.vue

@@ -9,13 +9,12 @@ export default {
   name: 'LineEcharts',
   mixins: [resize],
   props: {
-    className: {
-      type: String,
-      default: ''
-    },
     chartData: {
       type: Object,
-      required: true
+      require: true,
+      default: function() {
+        return {}
+      }
     },
     width: {
       type: String,
@@ -34,8 +33,11 @@ export default {
   watch: {
     chartData: {
       deep: true,
+      mmediate: true,
       handler(val) {
+        setTimeout(() => {
           this.setOptions(val)
+        }, 100)
       }
     }
   },
@@ -100,7 +102,6 @@ export default {
             }
           },
           axisLabel: {
-            fontWeight: 'bold',
             color: '#fff'
           },
           data: ['04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
@@ -114,8 +115,7 @@ export default {
             interval: 250,
             axisLabel: {
               textStyle: {
-                color: '#fff',
-                fontWeight: 'bold'
+                color: '#fff'
               }
             },
             // 轴线

src/utils/index.js

@@ -33,6 +33,52 @@ export function debounce(func, wait, immediate) {
   }
 }
 
+/**
+ * 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()

src/views/accessToLibrary/index.vue

@@ -2,38 +2,56 @@
   <div class="accessToLib-container">
     <div class="accessToLib-item">
       <span>总进馆人数</span>
-      <count-to :start-val="0" :end-val="2125462" :duration="3200" class="panel-num" />
+      <count-to :start-val="0" :end-val="totalNum" :duration="3200" class="panel-num" />
     </div>
-    <div class="accessToLib-item">
+    <div v-if="!isSelfService" class="accessToLib-item">
       <span>月进馆人数</span>
-      <count-to :start-val="0" :end-val="10062" :duration="3200" class="panel-num" />
+      <count-to :start-val="0" :end-val="monthNum" :duration="3200" class="panel-num" />
     </div>
     <div class="accessToLib-item">
       <span>今日进馆人数</span>
-      <count-to :start-val="0" :end-val="2462" :duration="3200" class="panel-num" />
+      <count-to :start-val="0" :end-val="dayNum" :duration="3200" class="panel-num" />
+    </div>
+    <div v-if="isSelfService" class="accessToLib-item">
+      <span>今日出馆人数</span>
+      <count-to :start-val="0" :end-val="dayNum" :duration="3200" class="panel-num" />
     </div>
   </div>
 </template>
 
 <script>
+import { FetchInitIntoNum } from '@/api/library'
 import CountTo from 'vue-count-to'
+
 export default {
   name: 'AccessToLibrary',
   components: {
     CountTo
   },
+  props: {
+    isSelfService: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    }
+  },
   data() {
     return {
-      timer: null
+      timer: null,
+      dayNum: 0,
+      monthNum: 0,
+      totalNum: 0
     }
   },
   created() {
     // 获取数据
+    this.getInitIntoNum()
   },
   mounted() {
     // 每15秒获取一次
     this.timer = setInterval(() => {
-      //
+      this.getInitIntoNum()
     }, 15000)
   },
   beforeDestroy() {
@@ -43,6 +61,17 @@ export default {
     })
   },
   methods: {
+    getInitIntoNum() {
+      FetchInitIntoNum().then((res) => {
+        if (res.errCode === 0) {
+          this.dayNum = res.data.dayPeopleNum
+          this.monthNum = res.data.monthPeopleNum
+          this.totalNum = res.data.historyPeopleNum
+        } else {
+          this.$message.error('接口错误')
+        }
+      })
+    }
   }
 }
 </script>

src/views/data.json

@@ -1,90 +0,0 @@
-{
-  "ranking":[
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "大个子狗与小个子猫",
-      "author": "高小定",
-      "ranking": 1
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "森林大探险",
-      "author": "卷毛老师",
-      "ranking": 2
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "家有喵星人",
-      "author": "查尔斯",
-      "ranking": 3
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "奇妙的冒险",
-      "author": "李小飞",
-      "ranking": 4
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "豆豆龙成长记",
-      "author": "卷毛老师",
-      "ranking": 5
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "奇妙的冒险",
-      "author": "李小飞",
-      "ranking": 6
-    },
-    {
-      "img":"https://qiniu.aiyxlib.com/bg.png",
-      "title": "豆豆龙成长记",
-      "author": "卷毛老师",
-      "ranking": 7
-    }
-  ],
-  "readstar":[
-    {
-      "des": "读者张山上周借阅图书30册",
-      "date": "2022-09-06",
-      "ranking": 1
-    },
-    {
-      "des": "读者张山上周借阅图书30册",
-      "date": "2022-09-06",
-      "ranking": 2
-    },
-    {
-      "des": "读者张山上周借阅图书30册",
-      "date": "2022-09-06",
-      "ranking": 3
-    },
-    {
-      "des": "读者张山上周借阅图书30册",
-      "date": "2022-09-06",
-      "ranking": 4
-    },
-    {
-      "des": "读者张山上周借阅图书30册",
-      "date": "2022-09-06",
-      "ranking": 5
-    }
-    ,
-    {
-      "des": "读者张山上周借阅图书30册",
-      "date": "2022-09-06",
-      "ranking": 6
-    },
-    {
-      "des": "读者张山上周借阅图书30册",
-      "date": "2022-09-06",
-      "ranking": 7
-    }
-    ,
-    {
-      "des": "读者张山上周借阅图书30册",
-      "date": "2022-09-06",
-      "ranking": 8
-    }
-  ]
-}

src/views/index.vue

@@ -7,7 +7,7 @@
         <LengingRanking />
       </div>
       <div class="screen-middle">
-        <AccessToLibrary />
+        <AccessToLibrary :is-self-service="false" />
         <div class="video-box">
           <video width="100%" height="100%" controls loop autoplay muted :poster="poster">
             <source :src="src" type="video/mp4">

src/views/indexSelfService.vue

@@ -3,11 +3,11 @@
     <Header :header-title="headerTitle" />
     <div class="screen-main">
       <div class="screen-left">
-        <TodayBorrowed :chart-data="chartData" />
+        <TodayBorrowed />
         <LengingRanking />
       </div>
       <div class="screen-middle">
-        <AccessToLibrary />
+        <AccessToLibrary :is-self-service="true" />
         <div class="video-box">
           <video width="100%" height="100%" controls loop autoplay muted :poster="poster">
             <source :src="src" type="video/mp4">

src/views/lengingRanking/index.vue

@@ -2,9 +2,19 @@
   <!-- 借阅排行榜 -->
   <div class="screen-item lending-ranking">
     <div class="common-title">借阅排行榜</div>
-    <vue-seamless-scroll :data="rankingList" :class-option="defaultOption" class="big-module module-content">
-      <div v-for="(item,index) in rankingList" :key="index" class="book-list-item">
-        <img class="book-img" :src="item.cover">
+    <vue-seamless-scroll
+      :data="rankingList"
+      :class-option="defaultOption"
+      class="big-module module-content"
+    >
+      <div
+        v-for="(item, index) in rankingList"
+        :key="index"
+        class="book-list-item"
+      >
+        <div class="book-img">
+          <img :src="item.cover" :onerror="defaultImg">
+        </div>
         <div class="book-info">
           <h4 class="title-item">{{ item.bookName }}</h4>
           <p>{{ item.author }}</p>
@@ -19,7 +29,7 @@
           <svg v-if="index === 2" class="icon" aria-hidden="true">
             <use xlink:href="#icon-a-no3" />
           </svg>
-          <p>NO.{{ index+1 }}</p>
+          <p>NO.{{ index + 1 }}</p>
         </div>
       </div>
     </vue-seamless-scroll>
@@ -27,15 +37,13 @@
 </template>
 
 <script>
-// import data from '../data'
 import { FetchBorrowRank } from '@/api/library'
-// import scrollMixins from '@/common/scrollMixins'
 
 export default {
   name: 'LengingRanking',
-  // mixins: [scrollMixins],
   data() {
     return {
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
       rankingList: []
     }
   },
@@ -47,43 +55,24 @@ export default {
       }
     }
   },
-  created() {
-    // this.rankingList = data.ranking
-  },
+  created() {},
   mounted() {
     this.getBorrowRank()
-    // this.dataCompleteFun()
-  },
-  destroyed() {
-    // 清理定时器
-    clearTimeout(this.pauseTimer)
-    this.pauseTimer = null
-    clearInterval(this.scrollTimer)
-    this.scrollTimer = null
   },
   methods: {
     getBorrowRank() {
-      FetchBorrowRank().then(res => {
+      FetchBorrowRank().then((res) => {
         if (res.errCode === 0) {
-          console.log(res)
           this.rankingList = res.data
         } else {
           this.$message.error('接口错误')
         }
       })
-    },
-    dataCompleteFun() {
-      this.scrollDom = this.$refs.lendList
-      this.interval = 50
-      this.timeout = 2000
-      this.step = 1
-      // 开启滚动
-      this.autoScroll()
     }
   }
 }
 </script>
 
 <style lang="scss">
-@import "~@/assets/styles/index.scss";
+@import '~@/assets/styles/index.scss';
 </style>

src/views/newBookRecommend/index.vue

@@ -6,22 +6,24 @@
       <swiper ref="swiperThumbs" class="swiper gallery-thumbs directive" :options="swiperOptionThumbs">
         <swiper-slide v-for="(item,index) in rankingList" :key="index" class="slide-1">
           <div class="book-list-item">
-            <img class="book-img" :src="item.img">
+            <div class="book-img">
+              <img :src="item.cover" :onerror="defaultImg">
+            </div>
             <div class="book-info">
-              <h4 class="title-item">{{ item.title }}</h4>
-              <p>{{ item.author }}</p>
+              <h4 class="title-item">{{ item.nbName }}</h4>
+              <p>{{ item.nbAuthor }}</p>
             </div>
             <div class="ranking-num">
-              <svg v-if="item.ranking === 1" class="icon" aria-hidden="true">
+              <svg v-if="index === 0" class="icon" aria-hidden="true">
                 <use xlink:href="#icon-a-no1" />
               </svg>
-              <svg v-if="item.ranking === 2" class="icon" aria-hidden="true">
+              <svg v-if="index === 1" class="icon" aria-hidden="true">
                 <use xlink:href="#icon-a-no21" />
               </svg>
-              <svg v-if="item.ranking === 3" class="icon" aria-hidden="true">
+              <svg v-if="index === 2" class="icon" aria-hidden="true">
                 <use xlink:href="#icon-a-no3" />
               </svg>
-              <p>NO.{{ item.ranking }}</p>
+              <p>NO.{{ index+1 }}</p>
             </div>
           </div>
         </swiper-slide>
@@ -31,8 +33,7 @@
 </template>
 
 <script>
-import data from '../data'
-import scrollMixins from '@/common/scrollMixins'
+import { FetchNewBookRecommend } from '@/api/library'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/dist/css/swiper.css'
 
@@ -42,9 +43,9 @@ export default {
     swiper,
     swiperSlide
   },
-  mixins: [scrollMixins],
   data() {
     return {
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
       rankingList: [],
       swiperOptionThumbs: {
         direction: 'vertical',
@@ -63,37 +64,30 @@ export default {
     }
   },
   created() {
-    this.rankingList = data.ranking
   },
   mounted() {
-    // this.dataCompleteFun()
-  },
-  destroyed() {
-    // 清理定时器
-    clearTimeout(this.pauseTimer)
-    this.pauseTimer = null
-    clearInterval(this.scrollTimer)
-    this.scrollTimer = null
+    this.getNewBookRecommend()
   },
   methods: {
-    dataCompleteFun() {
-      this.scrollDom = this.$refs.newbook
-      this.interval = 50
-      this.timeout = 2000
-      this.step = 1
-      // 开启滚动
-      this.autoScroll()
+    getNewBookRecommend() {
+      FetchNewBookRecommend().then(res => {
+        if (res.errCode === 0) {
+          this.rankingList = res.data
+        } else {
+          this.$message.error('接口错误')
+        }
+      })
     }
   }
 }
 </script>
 
-  <style lang="scss">
-  @import "~@/assets/styles/index.scss";
-  .swiper-container{
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+.swiper-container{
   overflow: initial;
-  }
-  .swiper {
+}
+.swiper {
   &.gallery-thumbs {
     height: 1.275rem;
   }
@@ -104,5 +98,5 @@ export default {
   &.gallery-thumbs .swiper-slide-active {
     background-color: #09194B;
   }
-  }
-  </style>
+}
+</style>

src/views/notice/index.vue

@@ -3,30 +3,25 @@
   <div class="screen-item notice">
     <div class="common-title">通知公告</div>
     <div class="small-module module-content">
-      <!-- <i class="iconfont icon-tongzhi" /> -->
       <span class="notice-icon-gif" />
-      <vue-seamless-scroll :data="noticeData" :class-option="defaultOption" class="seamless-warp">
+      <div class="seamless-warp">
+        <div class="notice-txt" v-html="content" />
+      </div>
+      <!-- <vue-seamless-scroll :data="noticeData" :class-option="defaultOption" class="seamless-warp">
         <p v-for="(item,index) in noticeData" :key="index"> {{ item.des }}</p>
-      </vue-seamless-scroll>
+      </vue-seamless-scroll> -->
     </div>
   </div>
 </template>
 
 <script>
-import scrollMixins from '@/common/scrollMixins'
+import { FetchInitNotice } from '@/api/library'
 export default {
   name: 'Notice',
-  mixins: [scrollMixins],
   data() {
     return {
-      noticeData: [
-        {
-          'des': '1.经区政府批准，区人力资源和社会保障局人事工作综合事务中心协助组织符合政府安排工作条件退役士兵安排考试。综合成绩由量化评分和笔试成绩合并计算，量化评分占总成绩的60%，笔试成绩占总成绩的40%。服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的'
-        },
-        {
-          'des': '2.经区政府批准，区人力资源和社会保障局人事工作综合事务中心协助组织符合政府安排工作条件退役士兵安排考试。综合成绩由量化评分和笔试成绩合并计算，量化评分占总成绩的60%，笔试成绩占总成绩的40%。服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的'
-        }
-      ]
+      noticeData: [],
+      content: null
     }
   },
   computed: {
@@ -43,24 +38,20 @@ export default {
   created() {
   },
   mounted() {
-    // this.dataCompleteFun()
-  },
-  destroyed() {
-    // 清理定时器
-    clearTimeout(this.pauseTimer)
-    this.pauseTimer = null
-    clearInterval(this.scrollTimer)
-    this.scrollTimer = null
+    this.getInitNotice()
   },
   methods: {
-    // 数据加载完成方法
-    dataCompleteFun() {
-      this.scrollDom = this.$refs.noticetxt
-      this.interval = 150
-      this.timeout = 5000
-      this.step = 1
-      // 开启滚动
-      this.autoScroll()
+    getInitNotice() {
+      FetchInitNotice().then((res) => {
+        if (res.errCode === 0) {
+          const json = {}
+          json.des = res.data
+          this.noticeData.push(json)
+          this.content = res.data
+        } else {
+          this.$message.error('接口错误')
+        }
+      })
     }
   }
 }

src/views/readStar/index.vue

@@ -3,63 +3,72 @@
   <div class="screen-item read-star">
     <div class="common-title">阅读之星</div>
     <div ref="starList" class="medium-module module-content">
-      <div v-for="(item,index) in readstarList" :key="index" :class="['readstart-item', {'star1-bg':item.ranking===1}, {'star2-bg':item.ranking===2}, {'star3-bg':item.ranking===3}]">
-        <svg v-if="item.ranking === 1" class="icon icon-star-1" aria-hidden="true">
+      <div v-for="(item,index) in readstarList" :key="index" :class="['readstart-item', {'star1-bg':index === 0}, {'star2-bg':index === 1}, {'star3-bg':index === 2}]">
+        <svg v-if="index === 0" class="icon icon-star-1" aria-hidden="true">
           <use xlink:href="#icon-a-1" />
         </svg>
-        <svg v-else-if="item.ranking === 2" class="icon icon-star-2" aria-hidden="true">
+        <svg v-else-if="index === 1" class="icon icon-star-2" aria-hidden="true">
           <use xlink:href="#icon-a-21" />
         </svg>
-        <svg v-else-if="item.ranking === 3" class="icon icon-star-3" aria-hidden="true">
+        <svg v-else-if="index === 2" class="icon icon-star-3" aria-hidden="true">
           <use xlink:href="#icon-a-3" />
         </svg>
-        <span v-else class="star-num">{{ item.ranking }}</span>
-        <p class="star-info title-item">{{ item.des }}</p>
-        <p class="star-date">{{ item.date }}</p>
+        <span v-else class="star-num">{{ index+1 }}</span>
+        <p class="star-info title-item"> 读者{{ item.readerName }}上周借阅图书{{ item.borrowNum }}册</p>
+        <p class="star-date">{{ mondayDate }}</p>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import scrollMixins from '@/common/scrollMixins'
-import data from '../data'
+import { FetchBorrowStar } from '@/api/library'
+import { parseTime } from '@/utils/index.js'
 export default {
   name: 'ReadStar',
-  mixins: [scrollMixins],
   data() {
     return {
-      readstarList: []
+      readstarList: [],
+      mondayDate: null
     }
   },
   created() {
-    this.readstarList = data.readstar
   },
   mounted() {
-    this.dataCompleteFun()
-  },
-  destroyed() {
-    // 清理定时器
-    clearTimeout(this.pauseTimer)
-    this.pauseTimer = null
-    clearInterval(this.scrollTimer)
-    this.scrollTimer = null
+    this.getBorrowStar()
   },
   methods: {
-    // 数据加载完成方法
-    dataCompleteFun() {
-      this.scrollDom = this.$refs.starList
-      this.interval = 50
-      this.timeout = 2000
-      this.step = 1
-      // 开启滚动
-      // this.autoScroll()
+    // 获取list
+    getBorrowStar() {
+      FetchBorrowStar().then(res => {
+        if (res.errCode === 0) {
+          console.log(res)
+          this.readstarList = res.data
+          this.getMondayTime()
+        } else {
+          this.$message.error('接口错误')
         }
+      })
+    },
+    // 获取本周一
+    getMondayTime() {
+      const today = new Date()
+      const year = today.getFullYear()
+      const month = today.getMonth() + 1
+      const day = today.getDate()
+      const newDate = new Date(year + '-' + month + '-' + day + ' 00:00:00')
 
+      const nowTime = newDate.getTime()
+      const weekDay = newDate.getDay()
+      const oneDayTime = 24 * 60 * 60 * 1000
+
+      const mondayTime = (1 - weekDay) * oneDayTime + nowTime
+      this.mondayDate = parseTime(mondayTime, '{y}-{m}-{d}')
+    }
   }
 }
 </script>
 
-  <style lang="scss">
-  @import "~@/assets/styles/index.scss";
-  </style>
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+</style>

src/views/todayBorrowed/index.vue

@@ -35,10 +35,9 @@ export default {
   methods: {
     getHalfYearBorrowNum() {
       const params = {
-        ip: '111'
+        ip: '111' // 阅览室-此处随便填写个字符串
       }
       FetchHalfYearBorrowNum(params).then(res => {
-        console.log(res)
         if (res.errCode === 0) {
           // this.totalLendData = res.data.total
           // this.chartData.totalLendMonth = res.data.list.map(item => {

src/views/totalLending/index.vue

@@ -5,7 +5,9 @@
     <div class="small-module module-content">
       <div class="chartNum">
         <div id="TNum" class="box-items">
-          <li class="number-item"><span><i ref="numberItem" class="item">0123456789</i></span></li>
+          <li v-for="(item,index) in chartNum" :key="index" class="number-item">
+            <span><i ref="numberItem" class="item">0123456789</i></span>
+          </li>
         </div>
       </div>
       <div class="chart-wrapper" style="height: calc(100% - 68px);">
@@ -18,6 +20,7 @@
 <script>
 import LineChart from '@/components/echart/lineChart'
 import { FetchHalfYearBorrowNum } from '@/api/library'
+
 export default {
   name: 'TotalLending',
   components: {
@@ -34,9 +37,6 @@ export default {
     }
   },
   created() {
-    this.$nextTick(() => {
-      this.start()
-    })
     this.getHalfYearBorrowNum()
   },
   mounted() {
@@ -62,15 +62,6 @@ export default {
         }
       })
     },
-    start(total) {
-      var strHtml = ''
-      for (var i = 0; i < this.chartNum.length; i++) {
-        strHtml += '<li class="number-item">\n' +
-                ' <span><i class="item" ref="numberItem">0123456789</i></span>\n' +
-                ' </li>'
-      }
-      document.getElementById('TNum').innerHTML = strHtml
-    },
     toOrderNum(num) {
       num = num.toString()
       if (num.length < 9) {