图表需求更新

src/api/library.js

@@ -163,6 +163,24 @@ export function FetchInitIntoNum(params) {
   })
 }
 
+// 获取本年四个季度的数据
+export function FetchQuarterJH(params) {
+  return request({
+    url: '/qyzt/getQuarterJH' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get',
+    urlType: 'local'
+  })
+}
+
+// 今年每个月的
+export function FetchMonthJH(params) {
+  return request({
+    url: '/qyzt/getMonthJH' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get',
+    urlType: 'local'
+  })
+}
+
 export default {
   FetchInitToken,
   FetchLibBookTotal,
@@ -181,5 +199,7 @@ export default {
   FetchTotalResource,
   FetchTodayJH,
   FetchWeekJH,
-  FetchInitIntoNum
+  FetchInitIntoNum,
+  FetchQuarterJH,
+  FetchMonthJH
 }

src/assets/styles/index.scss

@@ -1024,9 +1024,12 @@
       padding-left: .35rem;
       margin-top: 0;
       line-height: 0;
-      background: url('~@/assets/images/title-middle.png') no-repeat left top;
+      background: url('~@/assets/images/title-middle.png') no-repeat left bottom;
       background-size: cover;
       font-weight: bold;
+      &.big-title{
+        padding-bottom: .45rem;
+      }
     }
   }
 }

src/components/echart/lineChart.vue

@@ -34,7 +34,7 @@ export default {
   watch: {
     chartDayData: {
       deep: true,
-      mmediate: true,
+      immediate: true,
       handler(val) {
         setTimeout(() => {
           this.initChart()

src/components/echart/lineChartMonth.vue

@@ -0,0 +1,221 @@
+<template>
+  <div ref="lineMonthContainer" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from '@/utils/resizeMixins.js'
+export default {
+  name: 'LineEcharts',
+  mixins: [resize],
+  props: {
+    chartMonthData: {
+      type: Object,
+      required: true,
+      default: () => ({
+        timeData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        returnData: [],
+        borrowedData: []
+      })
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      timeReMonth: null // 定时器变量
+    }
+  },
+  watch: {
+    chartMonthData: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        this.$nextTick(() => {
+          this.initChart()
+        })
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+    this.resetPiechartMonthData()
+    window.addEventListener('resize', this.__resizeHandler)
+  },
+  beforeDestroy() {
+    clearInterval(this.timeReMonth)
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
+    }
+  },
+  methods: {
+    resetPiechartMonthData() {
+      clearInterval(this.timeReMonth)
+      this.timeReMonth = setInterval(() => {
+        if (!this.chart) {
+          return
+        }
+        this.chart.clear()
+        this.initChart()
+      }, 8000)
+    },
+    initChart() {
+      const dom = this.$refs.lineMonthContainer
+
+      if (this.chart) {
+        this.setOptions(this.chartMonthData)
+        return
+      }
+      this.chart = echarts.init(dom, 'dark')
+      this.setOptions(this.chartMonthData)
+    },
+    setOptions({ timeData = [], returnData = [], borrowedData = [] } = {}) {
+      const defaultLength = timeData.length || 12
+      const defaultData = Array(defaultLength).fill(0)
+
+      const validateData = (data) => {
+        if (data && data.length === defaultLength) return data
+        return defaultData
+      }
+
+      const returnVals = validateData(returnData)
+      const borrowedVals = validateData(borrowedData)
+
+      this.chart.setOption({
+        backgroundColor: '#01103D',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        legend: {
+          top: '4%',
+          right: '4%',
+          icon: 'rect',
+          itemHeight: 6,
+          itemWidth: 11,
+          textStyle: {
+            color: '#339CFF',
+            fontSize: 18
+          },
+          data: [
+            {
+              name: '借出',
+              icon: 'rect',
+              textStyle: {
+                color: '#41A3FF',
+                fontFamily: 'DingTalk_JinBuTi_Regular'
+              }
+            },
+            {
+              name: '归还',
+              icon: 'rect',
+              textStyle: {
+                color: '#FFD050',
+                fontFamily: 'DingTalk_JinBuTi_Regular'
+              }
+            }
+          ]
+        },
+        grid: {
+          left: '2%',
+          right: '4%',
+          bottom: '4%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: timeData,
+          axisLabel: {
+            show: true,
+            color: '#79B8FF',
+            fontSize: 16,
+            fontFamily: 'DingTalk_JinBuTi_Regular'
+          },
+          axisLine: { show: false },
+          axisTick: { show: false },
+          splitLine: { show: false },
+          boundaryGap: false
+        }],
+        yAxis: [
+          {
+            type: 'value',
+            max: function(value) {
+              return Math.ceil(value.max + (value.max - value.min) * 0.2)
+            },
+            min: 0,
+            axisLabel: {
+              interval: 'auto',
+              formatter: (value) => Math.round(value),
+              textStyle: {
+                color: '#79B8FF',
+                fontSize: 16,
+                fontFamily: 'DingTalk_JinBuTi_Regular'
+              }
+            },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(66, 139, 221, 0.2)',
+                type: 'solid',
+                opacity: 1,
+                width: 1
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '借出',
+            type: 'line',
+            stack: 'Total',
+            itemStyle: { color: '#41A3FF' },
+            lineStyle: { width: 3, color: '#41A3FF' },
+            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: '#41A3FF' }
+              ])
+            },
+            data: borrowedVals
+          },
+          {
+            name: '归还',
+            type: 'line',
+            stack: 'Total',
+            lineStyle: { width: 3, color: '#FFD14F' },
+            showSymbol: false,
+            itemStyle: { color: '#FFD14F' },
+            areaStyle: {
+              opacity: 0.6,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(24, 176, 143, 0)' },
+                { offset: 1, color: '#FFD14F' }
+              ])
+            },
+            data: returnVals
+          }
+        ]
+      }, true)
+    }
+  }
+}
+</script>

src/components/echart/lineChartQuarter.vue

@@ -0,0 +1,267 @@
+<template>
+  <div ref="lineContainer" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from '@/utils/resizeMixins.js'
+export default {
+  name: 'LineEcharts',
+  mixins: [resize],
+  props: {
+    chartQuarterData: {
+      type: Object,
+      required: true,
+      default: function() {
+        return {
+          quarterData: ['一季度', '二季度', '三季度', '四季度'],
+          returnData: [],
+          borrowedData: []
+        }
+      }
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      option: null,
+      timeRePie: null
+    }
+  },
+  watch: {
+    // 监听季度数据变化
+    chartQuarterData: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        setTimeout(() => {
+          this.initChart()
+        }, 100)
+      }
+    }
+  },
+  beforeDestroy() {
+    // 清除定时器，防止内存泄漏
+    clearInterval(this.timeRePie)
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+    window.addEventListener('resize', this.__resizeHandler)
+    this.resetPiechartQuarterData()
+  },
+  methods: {
+    resetPiechartQuarterData() {
+      clearInterval(this.timeRePie)
+      this.timeRePie = setInterval(() => {
+        if (!this.chart) {
+          return
+        }
+        this.chart.clear()
+        this.initChart()
+      }, 8000)
+    },
+    initChart() {
+      const dom = this.$refs.lineContainer
+      if (this.chart) {
+        this.setOptions(this.chartQuarterData)
+        return
+      }
+      this.chart = echarts.init(dom, 'dark')
+      this.setOptions(this.chartQuarterData)
+    },
+    setOptions({ quarterData, returnData, borrowedData } = {}) {
+      const defaultQuarters = ['一季度', '二季度', '三季度', '四季度']
+      const quarters = quarterData && quarterData.length ? quarterData : defaultQuarters
+      const returnVals = returnData && returnData.length ? returnData : [0, 0, 0, 0]
+      const borrowedVals = borrowedData && borrowedData.length ? borrowedData : [0, 0, 0, 0]
+
+      this.chart.setOption({
+        backgroundColor: '#01103D',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        legend: {
+          top: '4%',
+          right: '4%',
+          icon: 'rect',
+          itemHeight: 6,
+          itemWidth: 11,
+          textStyle: {
+            color: '#339CFF',
+            fontSize: 18
+          },
+          data: [
+            {
+              name: '借出',
+              icon: 'rect',
+              textStyle: {
+                color: '#41A3FF',
+                fontFamily: 'DingTalk_JinBuTi_Regular'
+              }
+            },
+            {
+              name: '归还',
+              icon: 'rect',
+              textStyle: {
+                color: '#FFD050',
+                fontFamily: 'DingTalk_JinBuTi_Regular'
+              }
+            }
+          ]
+        },
+        grid: {
+          left: '2%',
+          right: '4%',
+          bottom: '4%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: quarters,
+          axisLabel: {
+            show: true,
+            color: '#79B8FF',
+            fontSize: 16,
+            fontFamily: 'DingTalk_JinBuTi_Regular'
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              width: '1',
+              color: '#113D72',
+              type: 'solid'
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: '#333'
+            }
+          },
+          boundaryGap: false
+        }],
+        yAxis: [
+          {
+            type: 'value',
+            max: function(value) {
+              return Math.ceil(value.max + (value.max - value.min) * 0.2)
+            },
+            min: 0,
+            axisLabel: {
+              interval: 'auto',
+              formatter: function(value) {
+                return Math.round(value)
+              },
+              textStyle: {
+                color: '#79B8FF',
+                fontSize: 16,
+                fontFamily: 'DingTalk_JinBuTi_Regular'
+              }
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#113D72',
+                width: '1',
+                type: 'solid'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(66, 139, 221, 0.2)',
+                type: 'solid',
+                opacity: 1,
+                width: 1
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '借出',
+            type: 'line',
+            stack: 'Total',
+            itemStyle: {
+              color: '#41A3FF'
+            },
+            lineStyle: {
+              width: 3,
+              color: '#41A3FF'
+            },
+            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: '#41A3FF'
+                }
+              ])
+            },
+            data: borrowedVals
+          },
+          {
+            name: '归还',
+            type: 'line',
+            stack: 'Total',
+            lineStyle: {
+              width: 3,
+              color: '#FFD14F'
+            },
+            showSymbol: false,
+            itemStyle: {
+              color: '#FFD14F'
+            },
+            areaStyle: {
+              opacity: 0.6,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 176, 143, 0)'
+                },
+                {
+                  offset: 1,
+                  color: '#FFD14F'
+                }
+              ])
+            },
+            data: returnVals
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/map/index.vue

@@ -3,7 +3,7 @@
     <div class="map-content">
       <!-- 左边图书馆基本信息 -->
       <div class="lib-info">
-        <div class="database-title">{{ libCurrent && libCurrent.name }}</div>
+        <div class="database-title big-title" style="font-size: .47rem !important;">{{ libCurrent && libCurrent.name }}</div>
         <div class="lib-content">
           <div style="width: 5.175rem; height: 3rem; overflow: hidden;">
             <swiper v-if="swiperOption" :key="swiperKey" ref="mySwiper" class="swiperLib" :options="swiperOption">
@@ -350,27 +350,38 @@ export default {
             'DWSF': [114.664064, 30.478882],
             'ZJWSF': [114.635376, 30.532215]
           }
+          console.log('this.libALLNum', this.libALLNum)
+
+          const nameToLibcodeMap = {
+            '葛店城市书房·大湾分馆': 'DWSF',
+            '葛店城市书房·张家湾分馆': 'ZJWSF'
+          }
+          const libcodeToGclMap = {
+            'DWSF': 9145, // 大湾分馆
+            'ZJWSF': 5582 // 张家湾分馆
+          }
+          // const allowedLibcodes = ['DWSF', 'ZJWSF']
+
           const updatedLibraries = result.map(library => {
-            const matchingData = this.libALLNum.find(item => item.LIBCODE === library.tcId)
-            console.log('matchingData', matchingData)
+            console.log('', library)
+            // 通过图书馆名称获取对应的LIBCODE
+            const currentLibcode = nameToLibcodeMap[library.name] || ''
+            // 根据LIBCODE获取对应的GCL值
+            const currentGcl = libcodeToGclMap[currentLibcode] || 10000
+
+            // 保留原有的countCard逻辑
             const gdData = this.libALLNum.find(item => item.LIBCODE === 'GD')
-            if (matchingData) {
-              return {
-                ...library,
-                GCL: matchingData.GCL,
-                sort: Object.keys(libCode).indexOf(library.tcId) + 1,
-                coordinate: libCode[library.tcId],
-                countCard: matchingData.countCard ? matchingData.countCard : 0
-              }
-            } else {
-              return {
-                ...library,
-                GCL: 10000,
-                sort: Object.keys(libCode).indexOf(library.tcId) + 1,
-                coordinate: libCode[library.tcId],
-                countCard: gdData?.countCard || 0
+            // 根据当前LIBCODE获取排序值
+            const sortIndex = Object.keys(libCode).indexOf(currentLibcode)
+            const sortValue = sortIndex > -1 ? sortIndex + 1 : 99
 
-              }
+            return {
+              ...library,
+              GCL: currentGcl, // 按名称区分的GCL值
+              // 直接使用result原始数据中的occupationArea，不再自定义覆盖
+              sort: sortValue, // 按LIBCODE排序
+              coordinate: libCode[currentLibcode] || [0, 0], // 匹配不到坐标时给默认值
+              countCard: gdData?.countCard || 0
             }
           }).sort((a, b) => a.sort - b.sort)
 

src/views/pageOne/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="padding: 0 .4rem;">
-    <div class="pageOne-database">
+    <div class="pageOne-database" style="height: 6.25rem !important; ">
       <!-- 到馆统计 -->
       <div class="database-left">
         <h3 class="database-title">到馆统计</h3>
@@ -86,9 +86,9 @@
       </div>
     </div>
     <!-- 底部 图书推荐 -->
-    <div class="pageOne-book">
-      <h3 class="database-title">图书推荐</h3>
-      <div class="pageOne-book-content">
+    <div class="pageOne-book" style="margin-top: .13rem !important;">
+      <!-- <h3 class="database-title">图书推荐</h3> -->
+      <div class="pageOne-book-content" style="padding: .2rem 0 !important;">
         <div class="scrollBox">
           <vue-seamless-scroll
             ref="listData"
@@ -123,12 +123,13 @@
             </ul>
           </vue-seamless-scroll>
         </div>
-        <div class="wechat-code">
+        <div style=" writing-mode: vertical-rl; padding: 0 .38rem 0 .5rem; font-size: .5rem; letter-spacing: 8px;">热门图书推荐</div>
+        <!-- <div class="wechat-code">
           <div class="wechat-img">
             <img :src="wecharQrCodeSrc">
           </div>
           <span>微信扫一扫关注</span>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -136,7 +137,8 @@
 
 <script>
 // FetchFansCount
-import { FetchInitSetting, FetchInitIntoNum, FetchUsertotal, FetchLibBookTotal, FetchHotSearch, FetchLendingTotal, FetchNewBook, FetchMarcByISBN } from '@/api/library'
+// FetchLibBookTotal  暂时隐藏，因为馆藏量暂时写死
+import { FetchInitSetting, FetchInitIntoNum, FetchUsertotal, FetchHotSearch, FetchLendingTotal, FetchNewBook, FetchMarcByISBN } from '@/api/library'
 export default {
   name: 'PageOne',
   data() {
@@ -536,27 +538,28 @@ export default {
     },
     // 馆藏量
     getLibBookTotal() {
-      const params = {
-        'libcode': this.libcode,
-        'starttime': '2000-01-01',
-        'endtime': '2034-01-01'
-      }
-      return FetchLibBookTotal(params).then(res => {
-        const result = JSON.parse(res.data)
-        if (result.success & result.resultlist.length !== 0) {
-          return result.resultlist.reduce((acc, obj) => acc + obj.GCL, 0)
-        } else {
-          return 10000
-        }
-      }).catch(error => {
-        console.error('Error', error)
-        return 0
-      })
+      // const params = {
+      //   'libcode': this.libcode,
+      //   'starttime': '2000-01-01',
+      //   'endtime': '2034-01-01'
+      // }
+      // return FetchLibBookTotal(params).then(res => {
+      //   const result = JSON.parse(res.data)
+      //   if (result.success & result.resultlist.length !== 0) {
+      //     return result.resultlist.reduce((acc, obj) => acc + obj.GCL, 0)
+      //   } else {
+      //     return 9145
+      //   }
+      // }).catch(error => {
+      //   console.error('Error', error)
+      //   return 0
+      // })
+      return Promise.resolve(9145)
     },
     // 累计办证
-    getTotalForLibcode() {
+    getTotalForLibcode(libcode) {
       const params = {
-        'libcode': 'GD',
+        'libcode': libcode,
         // 'startdate': this.getFormattedDate(new Date(), -1),
         // 'enddate': this.getFormattedDate(new Date()),
         'startdate': '2010-01-01',
@@ -576,7 +579,7 @@ export default {
       })
     },
     getUserTotal() {
-      const libraries = ['DWSF']
+      const libraries = ['GD']
       const getTotalPromises = libraries.map(libcode => this.getTotalForLibcode(libcode))
       return Promise.all(getTotalPromises)
         .then(counts => counts.reduce((sum, count) => sum + parseInt(count, 10), 0))

src/views/pageThree/index.vue

@@ -1,29 +1,31 @@
 <template>
   <div class="page-wrapper ">
     <div class="page-three">
-      <div class="three-item three01">
+      <div class="three-item three01" style="height: 4rem !important;">
         <div class="database-title">本年累计借阅数量</div>
         <div class="three-lending">
           <div class="three-lending-left">
             <h5>本年累计借阅</h5>
-            <ul class="totalItem">
-              <li
-                v-for="(item, index) in yearTotal"
-                :key="index"
-                :class="[{'yearTotal': item.id === 'yearTotal'}]"
-              >
-                <div class="pageLeft-flop-box">
-                  <div>
-                    <span v-for="(ls, i) in item.valueArr" :key="item.id + i" :class="[{'flop-figure': !isNaN(ls)}, {'flop-comma': isNaN(ls)}]">
-                      <i v-if="!isNaN(ls)">0123456789</i>
-                    </span>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <ul class="totalItem">
+                <li
+                  v-for="(item, index) in yearTotal"
+                  :key="index"
+                  :class="[{'yearTotal': item.id === 'yearTotal'}]"
+                >
+                  <div class="pageLeft-flop-box">
+                    <div>
+                      <span v-for="(ls, i) in item.valueArr" :key="item.id + i" :class="[{'flop-figure': !isNaN(ls)}, {'flop-comma': isNaN(ls)}]">
+                        <i v-if="!isNaN(ls)">0123456789</i>
+                      </span>
+                    </div>
                   </div>
-                </div>
-              </li>
-            </ul>
-            <YearCircle :year-all-num="yearAllNum" />
+                </li>
+              </ul>
+              <YearCircle :year-all-num="yearAllNum" style="margin-left: 1rem !important;" />
+            </div>
           </div>
-          <div class="three-lending-right lending-ranking">
+          <!-- <div class="three-lending-right lending-ranking">
             <h5>分馆累计借阅排行榜</h5>
             <div class="ranking-cont">
               <ul class="ranking-title">
@@ -43,32 +45,34 @@
                 </li>
               </ul>
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
-      <div class="three-item  three02">
+      <div class="three-item  three02" style="height: 4rem !important;">
         <div class="database-title">今日借阅数量</div>
         <div class="three-lending">
           <div class="three-lending-left">
             <h5>今日累计借阅</h5>
-            <ul class="totalItem">
-              <li
-                v-for="(item, index) in todayTotal"
-                :key="index"
-                :class="[{'todayTotal': item.id === 'todayTotal'}]"
-              >
-                <div class="pageLeft-flop-box">
-                  <div>
-                    <span v-for="(ls, i) in item.valueArr" :key="item.id + i" :class="[{'flop-figure': !isNaN(ls)}, {'flop-comma': isNaN(ls)}]">
-                      <i v-if="!isNaN(ls)">0123456789</i>
-                    </span>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <ul class="totalItem">
+                <li
+                  v-for="(item, index) in todayTotal"
+                  :key="index"
+                  :class="[{'todayTotal': item.id === 'todayTotal'}]"
+                >
+                  <div class="pageLeft-flop-box">
+                    <div>
+                      <span v-for="(ls, i) in item.valueArr" :key="item.id + i" :class="[{'flop-figure': !isNaN(ls)}, {'flop-comma': isNaN(ls)}]">
+                        <i v-if="!isNaN(ls)">0123456789</i>
+                      </span>
+                    </div>
                   </div>
-                </div>
-              </li>
-            </ul>
-            <TodayCircle :today-all-num="todayAllNum" />
+                </li>
+              </ul>
+              <TodayCircle :today-all-num="todayAllNum" style="margin-left: 1rem !important;" />
+            </div>
           </div>
-          <div class="three-lending-right lending-ranking">
+          <!-- <div class="three-lending-right lending-ranking">
             <h5>分馆今日借阅排行榜 </h5>
             <div class="ranking-cont">
               <ul class="ranking-title">
@@ -88,19 +92,20 @@
                 </li>
               </ul>
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
-      <div class="three-item three03">
-        <div class="database-title">今日借阅趋势</div>
+      <div class="three-item three03" style="height: 6.25rem !important;">
+        <div class="database-title">月借阅趋势</div>
         <div class="chart-wrapper" style="width: 11.25rem; height: calc(100% - 35px);">
-          <LineChart :chart-day-data="chartDayData" />
+          <LineChart :chart-month-data="chartMonthData" />
         </div>
       </div>
-      <div class="three-item three04">
-        <div class="database-title">近7日借阅统计</div>
+      <div class="three-item three04" style="height: 6.25rem !important;">
+        <div class="database-title">季度借阅趋势</div>
         <div class="chart-wrapper" style="width: 11.25rem; height: calc(100% - 20px);">
-          <BarEcharts :chart-weekly-data="chartWeeklyData" />
+          <!-- <BarEcharts :chart-weekly-data="chartWeeklyData" /> -->
+          <LineChartQuarter :chart-quarter-data="chartQuarterData" />
         </div>
       </div>
     </div>
@@ -108,18 +113,21 @@
 </template>
 
 <script>
-import { FetchLibcodeDetails, FetchLendingTotal, FetchTodayJH, FetchWeekJH } from '@/api/library'
-import LineChart from '@/components/echart/lineChart'
-import BarEcharts from '@/components/echart/barEcharts'
+import { FetchLibcodeDetails, FetchLendingTotal, FetchTodayJH, FetchWeekJH, FetchQuarterJH, FetchMonthJH } from '@/api/library'
+import LineChart from '@/components/echart/lineChartMonth'
+// import BarEcharts from '@/components/echart/barEcharts'
+import LineChartQuarter from '@/components/echart/lineChartQuarter'
 import YearCircle from '@/components/echart/yearCircle'
 import TodayCircle from '@/components/echart/todayCircle'
+
 export default {
   name: 'PageThree',
   components: {
     LineChart,
-    BarEcharts,
+    // BarEcharts,
     YearCircle,
-    TodayCircle
+    TodayCircle,
+    LineChartQuarter
   },
   data() {
     return {
@@ -129,6 +137,16 @@ export default {
         returnData: [],
         borrowedData: []
       },
+      chartMonthData: {
+        timeData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        returnData: [],
+        borrowedData: []
+      },
+      chartQuarterData: {
+        quarterData: ['一季度', '二季度', '三季度', '四季度'],
+        returnData: [],
+        borrowedData: []
+      },
       chartWeeklyData: {
         date: [],
         inchartWeeklyData: [],
@@ -176,11 +194,16 @@ export default {
     this.$parent.clearExistingTimer('yearTotal')
   },
   created() {
-    this.getWeekJH()
+    // this.getWeekJH()
+    // this.getTodayJH()
+    // this.getMonthJH()
+    // this.getQuarterJH()
   },
   activated() {
     this.getLendingTotal()
-    this.getTodayJH()
+    // this.getTodayJH()
+    this.getMonthJH()
+    this.getQuarterJH()
     this.isKeep = true
   },
   deactivated() {
@@ -354,6 +377,68 @@ export default {
         console.error('Error', error)
       })
     },
+    async getMonthJH() {
+      try {
+        const params = { libcode: 'DWSF' }
+        const res = await FetchMonthJH(params)
+        const returnData = new Array(12).fill(0) // 归还数据
+        const borrowedData = new Array(12).fill(0) // 借出数据
+
+        res.data.forEach(item => {
+          const monthIndex = item.month - 1 // 转换为数组索引（0-11）
+          if (monthIndex >= 0 && monthIndex < 12) {
+            returnData[monthIndex] = item.hccDayTotalSum || 0 // 归还总数
+            borrowedData[monthIndex] = item.jccDayTotalSum || 0 // 借出总数
+          }
+        })
+
+        this.chartMonthData = {
+          timeData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          returnData,
+          borrowedData
+        }
+        console.log('this.chartMonthData', this.chartMonthData)
+      } catch (error) {
+        console.error('获取年度借出归还数据失败：', error)
+        this.chartMonthData = {
+          timeData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          returnData: [],
+          borrowedData: []
+        }
+      }
+    },
+    getQuarterJH() {
+      const params = { libcode: 'DWSF' }
+      FetchQuarterJH(params)
+        .then(res => {
+          console.log('res', res)
+          this.fillChartData(res.data)
+        })
+        .catch(error => {
+          console.error('获取季度数据失败：', error)
+        })
+    },
+    fillChartData(rawData) {
+      const returnData = [0, 0, 0, 0] // 归还：1-4季度对应索引0-3
+      const borrowedData = [0, 0, 0, 0] // 借出：1-4季度对应索引0-3
+
+      if (Array.isArray(rawData) && rawData.length) {
+        rawData.forEach(item => {
+          const index = item.quarter - 1
+          if (index >= 0 && index <= 3) {
+            returnData[index] = item.hccDayTotalSum || 0 // 归还值
+            borrowedData[index] = item.jccDayTotalSum || 0 // 借出值
+          }
+        })
+      }
+
+      this.chartQuarterData = {
+        ...this.chartQuarterData,
+        returnData,
+        borrowedData
+      }
+      console.log('chartQuarterData', this.chartQuarterData)
+    },
     getWeekJH() {
       FetchWeekJH().then(res => {
         this.chartWeeklyData = {