From 693782e774d2ad9019f94e0f1ba578938d0e2a6c Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Mon, 19 Sep 2022 17:49:15 +0800
Subject: [PATCH] =?UTF-8?q?24=E5=B0=8F=E6=97=B6/api=E8=AF=B7=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |  10 +-
 package.json                                  |   2 +-
 src/api/library.js                            |  25 +++
 src/assets/styles/index.scss                  |   6 +-
 src/components/echart/lineChart.vue           |  32 +--
 src/components/echart/lineChartService.vue    | 202 ++++++++++++++++++
 src/main.js                                   |  10 +-
 src/router/index.js                           |  24 ++-
 src/utils/request.js                          |  12 +-
 .../index.vue}                                |   0
 src/views/header/index.vue                    |  14 +-
 src/views/index.vue                           |  20 +-
 src/views/indexSelfService.vue                |  63 ++++++
 .../index.vue}                                |  28 ++-
 .../index.vue}                                |   2 +-
 src/views/{notice.vue => notice/index.vue}    |   0
 .../{readStar.vue => readStar/index.vue}      |   2 +-
 src/views/todayBorrowed/index.vue             |  61 ++++++
 .../index.vue}                                |  55 +++--
 vue.config.js                                 |   8 +-
 20 files changed, 482 insertions(+), 94 deletions(-)
 create mode 100644 src/api/library.js
 create mode 100644 src/components/echart/lineChartService.vue
 rename src/views/{accessToLibrary.vue => accessToLibrary/index.vue} (100%)
 create mode 100644 src/views/indexSelfService.vue
 rename src/views/{lengingRanking.vue => lengingRanking/index.vue} (69%)
 rename src/views/{newBookRecommend.vue => newBookRecommend/index.vue} (99%)
 rename src/views/{notice.vue => notice/index.vue} (100%)
 rename src/views/{readStar.vue => readStar/index.vue} (98%)
 create mode 100644 src/views/todayBorrowed/index.vue
 rename src/views/{totalLending.vue => totalLending/index.vue} (58%)

diff --git a/.env.development b/.env.development
index 6740be0..652f2ca 100644
--- a/.env.development
+++ b/.env.development
@@ -3,17 +3,17 @@ ENV = 'development'
 # 接口地址
 
 #内网服务地址
-VUE_APP_BASE_API  = 'http://192.168.99.107:7070'
-VUE_APP_WS_API = 'ws://192.168.99.107:7071'
-VUE_APP_CAMERA_API = '192.168.99.107'
+#VUE_APP_BASE_API  = 'http://192.168.99.107:7070'
+#VUE_APP_WS_API = 'ws://192.168.99.107:7071'
+#VUE_APP_CAMERA_API = '192.168.99.107'
 
 # 刘力-本地服地址
 #VUE_APP_BASE_API  = 'http://192.168.99.65:7070'
 #VUE_APP_WS_API = 'ws://192.168.99.65:7071'
 
 # 许镇-本地服地址
-#VUE_APP_BASE_API  = 'http://192.168.99.84:7070'
-#VUE_APP_WS_API = 'ws://192.168.99.84:7070'
+VUE_APP_BASE_API  = 'http://192.168.99.84:8080'
+VUE_APP_WS_API = 'ws://192.168.99.84:8081'
 
 # 是否启用 babel-plugin-dynamic-import-node插件
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/package.json b/package.json
index 8d3ec8c..7bec381 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "axios": "^0.27.2",
     "core-js": "^3.6.4",
     "echarts": "^4.6.0",
-    "element-ui": "^2.15.9",
+    "element-ui": "^2.15.10",
     "vue": "^2.6.11",
     "vue-awesome": "^4.0.2",
     "vue-count-to": "^1.0.13",
diff --git a/src/api/library.js b/src/api/library.js
new file mode 100644
index 0000000..224fb39
--- /dev/null
+++ b/src/api/library.js
@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+// import qs from 'qs'
+
+// 总借阅量
+export function FetchHalfYearBorrowNum(params) {
+  return request({
+    url: '/txhtsg/getHalfYearBorrowNum',
+    method: 'get',
+    params: params
+  })
+}
+
+// 借阅排行榜
+export function FetchBorrowRank(params) {
+  return request({
+    url: '/txhtsg/borrowRank',
+    method: 'get',
+    params: params
+  })
+}
+
+export default {
+  FetchHalfYearBorrowNum,
+  FetchBorrowRank
+}
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index ca4180c..36e7bef 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -149,8 +149,8 @@
     height: 4.125rem;
   }
   .big-module{
-    height: 6.675rem;
-    margin:0.1625rem 0;
+    height: 6.8125rem;
+    // margin:0.1625rem 0;
   }
   
   //排行榜-推荐 - list
@@ -221,7 +221,7 @@
   // 视频
   .video-box{
     width: 100%;
-    height: 5.225rem;
+    height: 5.2125rem;
   }
 
   // 阅读之星
diff --git a/src/components/echart/lineChart.vue b/src/components/echart/lineChart.vue
index d960504..e3caac9 100644
--- a/src/components/echart/lineChart.vue
+++ b/src/components/echart/lineChart.vue
@@ -10,7 +10,7 @@ export default {
   name: 'AcrossEcharts',
   mixins: [resize],
   props: {
-    addArcivesData: {
+    chartData: {
       type: Object,
       require: true,
       default: function() {
@@ -32,7 +32,7 @@ export default {
     }
   },
   watch: {
-    'addArcivesData': {
+    'chartData': {
       handler(val) {
         setTimeout(() => {
           this.drawChart()
@@ -67,22 +67,10 @@ export default {
               backgroundColor: '#339cff'
             }
           }
-          // formatter: function(params) {
-          //   var res = "<div style='width:100%;height:24px;margin-bottom:5px;padding:0 12px;line-height:24px;'><p>" + echarts.format.formatTime('yyyy年M月', new Date(params[0].name)) + ' </p></div>'
-          //   for (var i = 0; i < params.length; i++) {
-          //     res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">
-          //               <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[params[i].color]};"></span>
-          //               ${params[i].seriesName}
-          //               ${params[i].data}
-          //             </div>`
-          //   }
-          //   return res
-          // }
         },
         xAxis: {
           type: 'category',
-          // data: this.addArcivesData.addArcivesMonth,
-          data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06'],
+          data: this.chartData.totalLendMonth,
           axisLine: { // 轴线的颜色以及宽度
             lineStyle: {
               color: 'rgba(17, 61, 114,0.5)'
@@ -94,9 +82,6 @@ export default {
             textStyle: {
               color: '#fff'
             }
-            // formatter: function(value) {
-            //   return echarts.format.formatTime('M月', new Date(value))
-            // }
           }
         },
         yAxis: {
@@ -104,10 +89,7 @@ export default {
           min: 0,
           max: 1000,
           splitNumber: 5,
-          axisLine: { // 轴线的颜色以及宽度
-            // lineStyle: {
-            //   color: '#113D72'
-            // }
+          axisLine: {
             show: false
           },
           axisLabel: { // x轴文字的配置
@@ -128,9 +110,8 @@ export default {
         },
         series: [
           {
-            name: '新增档案',
-            // data: this.addArcivesData.addArcivesNum,
-            data: [100, 200, 300, 500, 600, 800],
+            name: '借阅量',
+            data: this.chartData.totalLendData,
             type: 'line',
             areaStyle: {
               normal: {
@@ -157,7 +138,6 @@ export default {
                       color: 'rgba(26, 201, 255, 0.1)' // 100% 处的颜色
                     }
                   ]
-                  // globalCoord: false // 缺省为 false
                 }
               }
             },
diff --git a/src/components/echart/lineChartService.vue b/src/components/echart/lineChartService.vue
new file mode 100644
index 0000000..2ed52fa
--- /dev/null
+++ b/src/components/echart/lineChartService.vue
@@ -0,0 +1,202 @@
+<template>
+  <div id="main2" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from '@/utils/resizeMixins.js'
+export default {
+  name: 'LineEcharts',
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: ''
+    },
+    chartData: {
+      type: Object,
+      required: true
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: 'calc(100% - 20px)'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      const dom = document.getElementById('main2')
+      this.chart = echarts.init(dom, 'dark')
+      this.setOptions(this.chartData)
+    },
+    setOptions({ returnData, borrowedData } = {}) {
+      this.chart.setOption({
+        backgroundColor: '#010326',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        legend: {
+          top: '4%',
+          right: '4%',
+          icon: 'rect',
+          itemHeight: 4,
+          itemWidth: 26,
+          textStyle: {
+            fontSize: '16px',
+            color: '#339CFF'
+          },
+          data: ['借出', '归还']
+        },
+        grid: {
+          left: '2%',
+          right: '4%',
+          bottom: '0',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          boundaryGap: false,
+          // 坐标轴轴线相关设置
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: '1',
+              color: '#113D72',
+              type: 'solid'
+            }
+          },
+          axisLabel: {
+            fontWeight: 'bold',
+            color: '#fff'
+          },
+          data: ['04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
+        }],
+        yAxis: [
+          {
+            type: 'value',
+            // 坐标轴最大值、最小值、强制设置数据的步长间隔
+            max: 1000,
+            min: 0,
+            interval: 250,
+            axisLabel: {
+              textStyle: {
+                color: '#fff',
+                fontWeight: 'bold'
+              }
+            },
+            // 轴线
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#113D72',
+                width: '1',
+                type: 'solid'
+              }
+            },
+            // 坐标轴刻度相关设置。
+            axisTick: {
+              show: false
+            },
+            // 分割线
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#113D72',
+                type: 'dashed',
+                // 透明度
+                opacity: 1,
+                width: 1
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '归还',
+            type: 'line',
+            smooth: 0.6,
+            lineStyle: {
+              width: 1,
+              color: '#18B08F'
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.6,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+
+                {
+                  offset: 0,
+                  color: 'rgba(24, 176, 143, 0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(23, 175, 142, 1)'
+                }
+              ])
+            },
+            data: returnData
+          },
+          {
+            name: '借出',
+            type: 'line',
+            smooth: 0.4,
+            lineStyle: {
+              width: 1,
+              color: '#FE8042'
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.6,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(254, 128, 66, 0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(254, 128, 66, 1)'
+                }
+              ])
+            },
+            data: borrowedData
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
diff --git a/src/main.js b/src/main.js
index ff320ee..f34912d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,10 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(ElementUI)
+
 // 适配flex
 import '@/common/flexible.js'
 
@@ -11,6 +15,10 @@ import './assets/styles/style.scss'
 import './assets/iconfont/iconfont.js'
 import './assets/fonts/fonts.css'
 
+// 按需引入然后注册在vue原型上
+import { Message } from 'element-ui'
+Vue.prototype.$message = Message
+
 import axios from 'axios'
 Vue.prototype.$axios = axios
 
@@ -22,7 +30,7 @@ import scroll from 'vue-seamless-scroll'
 Vue.use(scroll)
 
 Vue.config.productionTip = false
-
+Vue.component(Message.name, Message)
 new Vue({
   router,
   store,
diff --git a/src/router/index.js b/src/router/index.js
index f9ef8a9..294c91c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,14 +3,24 @@ import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
 
-const routes = [{
-  path: '/',
-  name: 'index',
-  component: () => import('../views/index.vue'),
-  meta: {
-    title: '智慧大屏'
+const routes = [
+  {
+    path: '/',
+    name: 'index',
+    component: () => import('../views/index.vue'),
+    meta: {
+      title: '智慧大屏'
+    }
+  },
+  {
+    path: '/selfServiceLibrary',
+    name: 'selfServiceLibrary',
+    component: () => import('../views/indexSelfService.vue'),
+    meta: {
+      title: '24小时自助图书馆'
+    }
   }
-}]
+]
 
 const router = new VueRouter({
   mode: 'history',
diff --git a/src/utils/request.js b/src/utils/request.js
index 99f050b..57cdf36 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { Message } from 'element-ui'
+// import { Message } from 'element-ui'
 
 // 创建axios实例
 const service = axios.create({
@@ -29,15 +29,7 @@ service.interceptors.request.use(
 // response 拦截器
 service.interceptors.response.use(
   response => {
-    const errorMsg = response.data.message
-    if (response.data.code === 200) {
-      return response.data.data
-    } else {
-      Message.error({
-        message: errorMsg,
-        duration: 5000
-      })
-    }
+    return response.data
   },
   error => {
     return Promise.reject(error)
diff --git a/src/views/accessToLibrary.vue b/src/views/accessToLibrary/index.vue
similarity index 100%
rename from src/views/accessToLibrary.vue
rename to src/views/accessToLibrary/index.vue
diff --git a/src/views/header/index.vue b/src/views/header/index.vue
index af2f2f2..a15c84f 100644
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -10,7 +10,7 @@
         <div />
         <div />
       </div>
-      <h2>东西湖区图书馆</h2>
+      <h2>{{ headerTitle }}</h2>
       <div class="ball-running-dots right-dots">
         <div />
         <div />
@@ -33,11 +33,23 @@
 import { getCurrentTime } from '@/utils/index'
 export default {
   name: 'Header',
+  props: {
+    headerTitle: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    }
+  },
   data() {
     return {
       nowDate: ''
     }
   },
+  watch: {
+    headerTitle: function() {
+    }
+  },
   created() {
     this.timer = setInterval(() => {
       this.nowDate = getCurrentTime()
diff --git a/src/views/index.vue b/src/views/index.vue
index 3db95b6..aaaf21e 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="screen-container">
-    <Header />
+    <Header :header-title="headerTitle" />
     <div class="screen-main">
       <div class="screen-left">
         <TotalLending />
@@ -25,12 +25,12 @@
 
 <script>
 import Header from '@/views/header/index.vue'
-import TotalLending from '@/views/totalLending.vue'
-import LengingRanking from '@/views/lengingRanking.vue'
-import AccessToLibrary from '@/views/accessToLibrary.vue'
-import Notice from '@/views/notice.vue'
-import NewBookRecommend from '@/views/newBookRecommend.vue'
-import ReadStar from '@/views/readStar.vue'
+import TotalLending from '@/views/totalLending/index.vue'
+import LengingRanking from '@/views/lengingRanking/index.vue'
+import AccessToLibrary from '@/views/accessToLibrary/index.vue'
+import Notice from '@/views/notice/index.vue'
+import NewBookRecommend from '@/views/newBookRecommend/index.vue'
+import ReadStar from '@/views/readStar/index.vue'
 export default {
   name: 'Home',
   components: {
@@ -44,8 +44,10 @@ export default {
   },
   data() {
     return {
-      poster: 'https://image.chinamcloud.com/hbrb/upload/Image/default/2021/04/12/d0b5a55806fd45d2b4232e2fc3c7f257/0_640_400_1994.jpg',
-      src: 'https://hbrbvod.chinamcache.com/hbrb/vod/2021/04/12/d0b5a55806fd45d2b4232e2fc3c7f257/d0b5a55806fd45d2b4232e2fc3c7f257_h264_1000k_mp4.mp4'
+      headerTitle: '东西湖区图书馆',
+      poster: 'https://qiniu.aiyxlib.com/1658104787005.jpg',
+      // src: 'https://hbrbvod.chinamcache.com/hbrb/vod/2021/04/12/d0b5a55806fd45d2b4232e2fc3c7f257/d0b5a55806fd45d2b4232e2fc3c7f257_h264_1000k_mp4.mp4'
+      src: 'https://qiniu.aiyxlib.com/1658104739000.mp4'
     }
   },
   created() {
diff --git a/src/views/indexSelfService.vue b/src/views/indexSelfService.vue
new file mode 100644
index 0000000..10d334c
--- /dev/null
+++ b/src/views/indexSelfService.vue
@@ -0,0 +1,63 @@
+<template>
+  <div id="screen-container">
+    <Header :header-title="headerTitle" />
+    <div class="screen-main">
+      <div class="screen-left">
+        <TodayBorrowed :chart-data="chartData" />
+        <LengingRanking />
+      </div>
+      <div class="screen-middle">
+        <AccessToLibrary />
+        <div class="video-box">
+          <video width="100%" height="100%" controls loop autoplay muted :poster="poster">
+            <source :src="src" type="video/mp4">
+          </video>
+        </div>
+        <ReadStar />
+      </div>
+      <div class="screen-right">
+        <Notice />
+        <NewBookRecommend />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from '@/views/header/index.vue'
+import TodayBorrowed from '@/views/todayBorrowed/index.vue'
+import LengingRanking from '@/views/lengingRanking/index.vue'
+import AccessToLibrary from '@/views/accessToLibrary/index.vue'
+import Notice from '@/views/notice/index.vue'
+import NewBookRecommend from '@/views/newBookRecommend/index.vue'
+import ReadStar from '@/views/readStar/index.vue'
+export default {
+  name: 'Home',
+  components: {
+    Header,
+    TodayBorrowed,
+    LengingRanking,
+    AccessToLibrary,
+    ReadStar,
+    Notice,
+    NewBookRecommend
+  },
+  data() {
+    return {
+      headerTitle: '24小时自助图书馆',
+      poster: 'https://qiniu.aiyxlib.com/1658104787005.jpg',
+      src: 'https://qiniu.aiyxlib.com/1658104739000.mp4'
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+</style>
diff --git a/src/views/lengingRanking.vue b/src/views/lengingRanking/index.vue
similarity index 69%
rename from src/views/lengingRanking.vue
rename to src/views/lengingRanking/index.vue
index 00b279c..0e2a875 100644
--- a/src/views/lengingRanking.vue
+++ b/src/views/lengingRanking/index.vue
@@ -4,22 +4,22 @@
     <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.img">
+        <img class="book-img" :src="item.cover">
         <div class="book-info">
-          <h4 class="title-item">{{ item.title }}</h4>
+          <h4 class="title-item">{{ item.bookName }}</h4>
           <p>{{ item.author }}</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>
     </vue-seamless-scroll>
@@ -27,7 +27,8 @@
 </template>
 
 <script>
-import data from './data'
+// import data from '../data'
+import { FetchBorrowRank } from '@/api/library'
 // import scrollMixins from '@/common/scrollMixins'
 
 export default {
@@ -47,9 +48,10 @@ export default {
     }
   },
   created() {
-    this.rankingList = data.ranking
+    // this.rankingList = data.ranking
   },
   mounted() {
+    this.getBorrowRank()
     // this.dataCompleteFun()
   },
   destroyed() {
@@ -60,6 +62,16 @@ export default {
     this.scrollTimer = null
   },
   methods: {
+    getBorrowRank() {
+      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
diff --git a/src/views/newBookRecommend.vue b/src/views/newBookRecommend/index.vue
similarity index 99%
rename from src/views/newBookRecommend.vue
rename to src/views/newBookRecommend/index.vue
index 0d4acf4..cfb34b8 100644
--- a/src/views/newBookRecommend.vue
+++ b/src/views/newBookRecommend/index.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import data from './data'
+import data from '../data'
 import scrollMixins from '@/common/scrollMixins'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/dist/css/swiper.css'
diff --git a/src/views/notice.vue b/src/views/notice/index.vue
similarity index 100%
rename from src/views/notice.vue
rename to src/views/notice/index.vue
diff --git a/src/views/readStar.vue b/src/views/readStar/index.vue
similarity index 98%
rename from src/views/readStar.vue
rename to src/views/readStar/index.vue
index c60a452..4dbcabe 100644
--- a/src/views/readStar.vue
+++ b/src/views/readStar/index.vue
@@ -23,7 +23,7 @@
 
 <script>
 import scrollMixins from '@/common/scrollMixins'
-import data from './data'
+import data from '../data'
 export default {
   name: 'ReadStar',
   mixins: [scrollMixins],
diff --git a/src/views/todayBorrowed/index.vue b/src/views/todayBorrowed/index.vue
new file mode 100644
index 0000000..a0adf12
--- /dev/null
+++ b/src/views/todayBorrowed/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <!-- 今日图书借还 -->
+  <div class="screen-item total-lending">
+    <div class="common-title">今日图书借还</div>
+    <div class="small-module module-content">
+      <div class="chart-wrapper" style="height: calc(100%);">
+        <LineChartService :chart-data="chartData" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LineChartService from '@/components/echart/lineChartService'
+import { FetchHalfYearBorrowNum } from '@/api/library'
+export default {
+  name: 'TodayBorrowed',
+  components: {
+    LineChartService
+  },
+  data() {
+    return {
+      chartData: {
+        returnData: [0, 232, 101, 264, 90, 500, 250],
+        borrowedData: [130, 60, 400, 234, 120, 340, 600]
+      }
+
+    }
+  },
+  created() {
+  },
+  mounted() {
+    // this.getHalfYearBorrowNum()
+  },
+  methods: {
+    getHalfYearBorrowNum() {
+      const params = {
+        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 => {
+          //   return item.date
+          // })
+          // this.chartData.totalLendData = res.data.list.map(item => {
+          //   return item.total
+          // })
+        } else {
+          this.$message.error('接口错误')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+</style>
diff --git a/src/views/totalLending.vue b/src/views/totalLending/index.vue
similarity index 58%
rename from src/views/totalLending.vue
rename to src/views/totalLending/index.vue
index 4608916..df8b61e 100644
--- a/src/views/totalLending.vue
+++ b/src/views/totalLending/index.vue
@@ -9,7 +9,7 @@
         </div>
       </div>
       <div class="chart-wrapper" style="height: calc(100% - 68px);">
-        <LineChart />
+        <LineChart :chart-data="chartData" />
       </div>
     </div>
   </div>
@@ -17,6 +17,7 @@
 
 <script>
 import LineChart from '@/components/echart/lineChart'
+import { FetchHalfYearBorrowNum } from '@/api/library'
 export default {
   name: 'TotalLending',
   components: {
@@ -24,18 +25,44 @@ export default {
   },
   data() {
     return {
-      chartNum: ['0', '0', '0', '0', '0', '0', '0', '0', '0']
+      totalLendData: null,
+      chartNum: ['0', '0', '0', '0', '0', '0', '0', '0', '0'],
+      chartData: {
+        totalLendMonth: [],
+        totalLendData: []
+      }
     }
   },
   created() {
-  },
-  mounted() {
     this.$nextTick(() => {
       this.start()
     })
+    this.getHalfYearBorrowNum()
+  },
+  mounted() {
   },
   methods: {
-    start() {
+    getHalfYearBorrowNum() {
+      const params = {
+        ip: null
+      }
+      FetchHalfYearBorrowNum(params).then(res => {
+        if (res.errCode === 0) {
+          this.totalLendData = res.data.total
+          this.chartData.totalLendMonth = res.data.list.map(item => {
+            return item.date
+          })
+          this.chartData.totalLendData = res.data.list.map(item => {
+            return item.total
+          })
+          this.toOrderNum(this.totalLendData)
+          this.setNumberTransform()
+        } else {
+          this.$message.error('接口错误')
+        }
+      })
+    },
+    start(total) {
       var strHtml = ''
       for (var i = 0; i < this.chartNum.length; i++) {
         strHtml += '<li class="number-item">\n' +
@@ -43,22 +70,16 @@ export default {
                 ' </li>'
       }
       document.getElementById('TNum').innerHTML = strHtml
-      // 定时改变数字
-      const _this = this
-      setInterval(() => {
-        _this.toOrderNum('123456')
-        _this.setNumberTransform()
-      }, 1000)
     },
     toOrderNum(num) {
-      num = num.toString() // 数字变成字符串
-      if (num.length < 9) { // 如未满位数，添加"0"补位
+      num = num.toString()
+      if (num.length < 9) {
         num = '0' + num
-        this.toOrderNum(num) // 递归添加"0"补位
-      } else if (num.length === 9) { // 数中加入逗号
-        this.chartNum = num.split('') // 将其便变成数据
+        this.toOrderNum(num)
+      } else if (num.length === 9) {
+        this.chartNum = num.split('')
       } else {
-        alert('显示异常')
+        console.log('借阅数据总数显示异常')
       }
     },
     setNumberTransform() {
diff --git a/vue.config.js b/vue.config.js
index 41930c2..ef1247c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -10,21 +10,21 @@ module.exports = {
   lintOnSave: process.env.NODE_ENV === 'development',
   productionSourceMap: false,
   devServer: {
-    port: 3000,
+    port: 8080,
     open: true,
     overlay: {
       warnings: false,
       errors: true
     },
     proxy: {
-      '/api': {
+      '/txhtsg/': {
         target: process.env.VUE_APP_BASE_API,
         changeOrigin: true,
         pathRewrite: {
-          '^/api': 'api'
+          '^/txhtsg': 'txhtsg'
         }
       },
-      '/auth': {
+      '/auth/': {
         target: process.env.VUE_APP_BASE_API,
         changeOrigin: true,
         pathRewrite: {