档案统计

src/api/archivesManage/lendManage.js

@@ -187,5 +187,14 @@ export function edit(data) {
   })
 }
 
+// 待办事项
+export function FetchWaitBorrower(parameter) {
+  return request({
+    url: 'api/borrow/waitBorrower',
+    method: 'get',
+    params: parameter
+  })
+}
+
 export default { add, edit, del }
 

src/api/archivesManage/statistics.js

@@ -55,6 +55,13 @@ export function FetchStorageStatistics(parameter) {
 }
 
 // 档案检索排名
+export function FetchInitArchivesSearchRanking(parameter) {
+  return request({
+    url: 'api/archives/initArchivesSearchRanking',
+    method: 'get',
+    params: parameter
+  })
+}
 
 // 档案实际情况
 export function FetchInitAddArchivesStatistics(parameter) {

src/views/archivesManage/lendManage/mixins/lending.js

@@ -85,7 +85,7 @@ export const lendingCrud = {
         case 4:
           return 'cell-lend has-return'
         default:
-          return 'cell-lend no-lend '
+          return 'cell-lend no-lend'
       }
     },
     // 获取部门list

src/views/components/echarts/catePie.vue

@@ -32,6 +32,17 @@ export default {
       chart: null
     }
   },
+  watch: {
+    'cateData': {
+      handler(val) {
+        setTimeout(() => {
+          this.drawChart()
+        }, 100)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   mounted() {
     this.drawChart()
   },
@@ -93,7 +104,6 @@ export default {
           }
         ]
       }
-
       option && this.chart.setOption(option)
     }
   }

src/views/components/echarts/lendAcross.vue

@@ -31,16 +31,25 @@ export default {
       chart: null
     }
   },
+  watch: {
+    'lendData': {
+      handler(val) {
+        setTimeout(() => {
+          this.drawChart()
+        }, 100)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   mounted() {
     this.drawChart()
   },
   beforeDestroy() {
-
   },
   methods: {
     drawChart() {
       const chartDom = document.getElementById('mainlend')
-
       this.chart = echarts.init(chartDom)
       let option = null
       option = {
@@ -79,7 +88,7 @@ export default {
           axisTick: {
             show: false
           },
-          data: ['异常档案', '在库档案', '已借档案', '待借档案', '逾期档案']
+          data: ['异常档案', '逾期档案', '待借档案', '已借档案', '在库档案']
         },
         series: [
           {
@@ -112,11 +121,11 @@ export default {
                 // }
                 color: function(params) {
                   var colorList = [
+                    ['#FF77AA', '#E6236D'],
                     ['#FF7A7D', '#FF3438'],
-                    ['#5FA2E2', '#1C54EE'],
-                    ['#84DFC0', '#0D9D81'],
                     ['#FBCE9B', '#FF801E'],
-                    ['#FF7A7D', '#FF3438']
+                    ['#84DFC0', '#0D9D81'],
+                    ['#5FA2E2', '#1C54EE']
                   ]
                   var colorItem = colorList[params.dataIndex]
                   return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
@@ -130,13 +139,11 @@ export default {
                   ], false)
                 }
               }
-
             },
             data: this.lendData // 从下到上的数据
           }
         ]
       }
-
       option && this.chart.setOption(option)
     }
 

src/views/components/echarts/typePie.vue

@@ -10,7 +10,6 @@ import resize from '@/views/dashboard/mixins/resize'
 export default {
   name: 'TypePie',
   mixins: [resize],
-
   props: {
     typeData: {
       type: Array,
@@ -33,6 +32,17 @@ export default {
       chart: null
     }
   },
+  watch: {
+    'typeData': {
+      handler(val) {
+        setTimeout(() => {
+          this.drawChart()
+        }, 100)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   mounted() {
     this.drawChart()
   },
@@ -43,8 +53,8 @@ export default {
       let option = null
       option = {
         tooltip: {
-          trigger: 'item'
-          // formatter: "{a} <br/>{b} : {c} ({d}%)"
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
 
         legend: {
@@ -86,13 +96,7 @@ export default {
                 show: false
               }
             },
-            data: [
-              { value: this.typeData[0], name: '文书档案', itemStyle: { color: '#0FBED9' }},
-              { value: this.typeData[1], name: '科技档案', itemStyle: { color: '#F65163' }},
-              { value: this.typeData[2], name: '会计档案', itemStyle: { color: '#FF8447' }},
-              { value: this.typeData[3], name: '实物档案', itemStyle: { color: '#76AF50' }},
-              { value: this.typeData[4], name: '基建档案', itemStyle: { color: '#8378E8' }}
-            ]
+            data: this.typeData
           }
         ]
       }

src/views/system/archiveStatistics/index.vue

@@ -21,12 +21,15 @@
             <h3 class="table-title">
               <p class="title-arrow">档案类别</p>
             </h3>
-            <div class="chart-wrapper" style="height: calc(100% - 40px);">
             <el-date-picker
-                v-model="value1"
-                type="month"
+              v-model="cateDate"
+              type="year"
               placeholder="请选择"
+              value-format="yyyy"
+              :picker-options="pickerOptions"
+              @change="handleCateDate"
             />
+            <div class="chart-wrapper" style="height: calc(100% - 40px);">
               <cate-pie :cate-data="cateData" />
             </div>
           </div>
@@ -38,6 +41,13 @@
             <h3 class="table-title">
               <p class="title-arrow">档案类型</p>
             </h3>
+            <el-date-picker
+              v-model="typeDate"
+              type="month"
+              placeholder="请选择"
+              value-format="yyyy-MM"
+              @change="handleTypeDate"
+            />
             <div class="chart-wrapper" style="height: calc(100% - 40px);">
               <type-pie :type-data="typeData" />
             </div>
@@ -53,8 +63,17 @@
             <h3 class="table-title">
               <p class="title-arrow">出入库管理情况</p>
             </h3>
+            <el-date-picker
+              v-model="inOutStorageDate"
+              class="storageInput"
+              type="year"
+              placeholder="请选择"
+              value-format="yyyy"
+              :picker-options="pickerOptions"
+              @change="handleStorageDate"
+            />
             <div class="chart-wrapper" style="height: calc(100% - 40px);">
-              <BarEcharts />
+              <BarEcharts :storage-data="storageData" />
             </div>
           </div>
         </el-col>
@@ -65,8 +84,15 @@
             <h3 class="table-title">
               <p class="title-arrow">档案检索排名</p>
             </h3>
+            <el-date-picker
+              v-model="arcSearchDate"
+              type="month"
+              placeholder="请选择"
+              value-format="yyyy-MM"
+              @change="handleSearchDate"
+            />
             <div class="chart-wrapper" style="height: calc(100% - 40px);">
-              <AcrossBar />
+              <AcrossBar :search-acrives-data="searchAcrivesData" />
             </div>
           </div>
         </el-col>
@@ -81,8 +107,16 @@
             <h3 class="table-title">
               <p class="title-arrow">档案实际情况</p>
             </h3>
+            <el-date-picker
+              v-model="arcAddDate"
+              type="year"
+              placeholder="请选择"
+              value-format="yyyy"
+              :picker-options="pickerOptions"
+              @change="handleArcAddSta"
+            />
             <div class="chart-wrapper" style="height: calc(100% - 40px);">
-              <LineEchart />
+              <LineEchart :add-arcives-data="addArcivesData" />
             </div>
           </div>
         </el-col>
@@ -98,14 +132,229 @@ import typePie from '@/views/components/echarts/typePie.vue'
 import BarEcharts from './module/barEcharts.vue'
 import AcrossBar from './module/acrossBar.vue'
 import LineEchart from './module/lineEchart.vue'
+import { FetchInitBorrowerNumStatistics, FetchInitArchivesTypeNum, FetchInitArchivesTypeStatistics, FetchStorageStatistics, FetchInitArchivesSearchRanking, FetchInitAddArchivesStatistics } from '@/api/archivesManage/statistics'
 export default {
   components: { lendAcross, catePie, typePie, BarEcharts, AcrossBar, LineEchart },
   data() {
     return {
-      value1: '',
-      lendData: [100, 18203, 23489, 29034, 104970],
-      cateData: [1000, 700],
-      typeData: [1110, 2000, 800, 600, 900]
+      cateDate: '',
+      typeDate: '',
+      inOutStorageDate: '',
+      arcSearchDate: '',
+      arcAddDate: '',
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now() - 8.64e6
+        }
+      },
+      lendData: [],
+      cateData: [],
+      typeData: [],
+      storageData: {
+        storageMonths: [],
+        inStorageData: [],
+        outStorageData: []
+      },
+      searchAcrivesData: {
+        searchName: [],
+        searchValue: []
+      },
+      addArcivesData: {
+        addArcivesMonth: [],
+        addArcivesNum: []
+      }
+    }
+  },
+  mounted() {
+    this.getBorrowerNumSta()
+    this.getArchivesTypeNum()
+    this.getArchivesTypeStatistics()
+    this.getStorageStatistics()
+    this.getArchivesSearchRanking()
+    this.getAddArchivesStatistics()
+  },
+  methods: {
+    // 档案借阅统计
+    getBorrowerNumSta() {
+      FetchInitBorrowerNumStatistics().then(res => {
+        if (res) {
+          delete res.total
+          // 固定排序 '在库档案', '已借档案', '待借档案', '逾期档案', '异常档案'
+          const borrowerArr = []
+          for (const i in res) {
+            const obj = {}
+            obj.name = i
+            obj.value = res[i]
+            if (i === 'inStorage') {
+              obj.sequence = 1
+            } else if (i === 'borrow') {
+              obj.sequence = 2
+            } else if (i === 'waitBorrow') {
+              obj.sequence = 3
+            } else if (i === 'overdue') {
+              obj.sequence = 4
+            } else if (i === 'abnormal') {
+              obj.sequence = 5
+            }
+            borrowerArr.push(obj)
+          }
+          this.arrSortByKey(borrowerArr, 'sequence', false)
+          borrowerArr.forEach(item => {
+            this.lendData.push(item.value)
+          })
+        }
+      })
+    },
+    // 档案类别 - 年选择
+    handleCateDate() {
+      console.log(this.cateDate)
+      this.getArchivesTypeNum()
+    },
+    // 档案类别
+    getArchivesTypeNum() {
+      let params
+      if (this.cateDate) {
+        params = {
+          'type': this.cateDate
+        }
+      } else {
+        params = {
+          'type': 1
+        }
+      }
+      FetchInitArchivesTypeNum(params).then(res => {
+        if (res) {
+          for (const i in res) {
+            this.cateData.push(res[i])
+          }
+        }
+      })
+    },
+    // 档案类型 - 月选择
+    handleTypeDate() {
+      console.log(this.typeDate)
+      this.getArchivesTypeStatistics()
+    },
+    // 档案类型
+    getArchivesTypeStatistics() {
+      let params
+      if (this.typeDate) {
+        params = {
+          'type': this.typeDate
+        }
+      } else {
+        params = {
+          'type': 1
+        }
+      }
+      FetchInitArchivesTypeStatistics(params).then(res => {
+        if (res) {
+          res.map(item => {
+            const obj = {}
+            obj.name = item.archivesType
+            obj.value = item.archivesNum
+            this.typeData.push(obj)
+          })
+        }
+      })
+    },
+    // 档案类别 - 年选择
+    handleStorageDate() {
+      console.log(this.inOutStorageDate)
+      this.getStorageStatistics()
+    },
+    // 出入库管理情况
+    getStorageStatistics() {
+      let params
+      let year
+      if (this.inOutStorageDate) {
+        params = {
+          'type': this.inOutStorageDate
+        }
+        year = this.arcAddDate
+      } else {
+        params = {
+          'type': 1
+        }
+        year = new Date().getFullYear()
+      }
+      FetchStorageStatistics(params).then(res => {
+        if (res) {
+          this.storageData.storageMonths = []
+          res.months.forEach(item => {
+            this.storageData.storageMonths.push(year + '/' + item)
+          })
+          this.storageData.inStorageData = res.inStorage
+          this.storageData.outStorageData = res.outStorage
+        }
+      })
+    },
+    handleSearchDate() {
+      console.log(this.arcSearchDate)
+      this.getArchivesSearchRanking()
+    },
+    // 档案检索排名
+    getArchivesSearchRanking() {
+      let params
+      if (this.arcSearchDate) {
+        params = {
+          'type': this.arcSearchDate
+        }
+      } else {
+        params = {
+          'type': 1
+        }
+      }
+      FetchInitArchivesSearchRanking(params).then(res => {
+        if (res) {
+          this.arrSortByKey(res, 'num', true)
+          this.searchAcrivesData.searchName = res.map(item => item.cnName)
+          this.searchAcrivesData.searchValue = res.map(item => item.num)
+        }
+      })
+    },
+    handleArcAddSta() {
+      console.log(this.arcAddDate)
+      this.getAddArchivesStatistics()
+    },
+    // 档案检索排名
+    getAddArchivesStatistics() {
+      let params
+      let year
+      if (this.arcAddDate) {
+        params = {
+          'type': this.arcAddDate
+        }
+        year = this.arcAddDate
+      } else {
+        params = {
+          'type': 1
+        }
+        year = new Date().getFullYear()
+      }
+      FetchInitAddArchivesStatistics(params).then(res => {
+        if (res) {
+          this.addArcivesData.addArcivesMonth = []
+          res.months.forEach(item => {
+            this.addArcivesData.addArcivesMonth.push(year + '/' + item)
+          })
+          this.addArcivesData.addArcivesNum = res.nums
+        }
+      })
+    },
+    // array: 需要进行排序的数组
+    // key: 根据某个属性进行排序
+    // order: 升序/降序  true：升序 false:降序
+    arrSortByKey(array, property, order) {
+      return array.sort(function(a, b) {
+        const value1 = a[property]
+        const value2 = b[property]
+        if (order) { // 升序
+          return value1 - value2
+        } else { // 降序
+          return value2 - value1
+        }
+      })
     }
   }
 }
@@ -114,26 +363,32 @@ export default {
 <style lang="scss" scoped>
 @import '~@/assets/styles/lend-manage.scss';
 .container-wrap{
-  min-height:calc(100vh - 636px) ;
-}
-.chart-wrapper{
   position: relative;
+  min-height:calc(100vh - 636px) ;
 }
 ::v-deep .el-date-editor{
   position: absolute;
   right: 20px;
-  top: -30px;
-  width: 116px;
-  z-index: 9999;
+  top: 10px;
+  width: 100px;
+  z-index: 99;
 
   .el-input__inner{
-    width: 116px;
+    width: 100px;
     height: 30px;
+    padding-left: 28px;
+    padding-right: 10px;
     border: 1px solid #339cff;
     background-color: #021941;
     line-height: 30px;
     color: #fff;
   }
+  .el-input__prefix{
+    left: 3px;
+  }
+  .el-input__suffix{
+    right: -2px;
+  }
 }
 .center-box{
   // width:100%;

src/views/system/archiveStatistics/module/acrossBar.vue

@@ -12,6 +12,13 @@ export default {
   name: 'AcrossEcharts',
   mixins: [resize],
   props: {
+    searchAcrivesData: {
+      type: Object,
+      require: true,
+      default: function() {
+        return {}
+      }
+    },
     width: {
       type: String,
       default: '100%'
@@ -26,6 +33,17 @@ export default {
       chart: null
     }
   },
+  watch: {
+    'searchAcrivesData': {
+      handler(val) {
+        setTimeout(() => {
+          this.drawChart()
+        }, 100)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   mounted() {
     this.drawChart()
   },
@@ -70,7 +88,7 @@ export default {
           axisTick: { // 刻度线隐藏
             show: false
           },
-          data: ['文书档案', '科技档案', '会计档案', '实物档案', '基建档案']
+          data: this.searchAcrivesData.searchName
         },
         series: [
           {
@@ -104,7 +122,7 @@ export default {
               }
 
             },
-            data: [18203, 23489, 29034, 104970, 131711] // 从下到上的数据
+            data: this.searchAcrivesData.searchValue
           }
         ]
       }

src/views/system/archiveStatistics/module/barEcharts.vue

@@ -12,6 +12,13 @@ export default {
   name: 'BarEcharts',
   mixins: [resize],
   props: {
+    storageData: {
+      type: Object,
+      require: true,
+      default: function() {
+        return {}
+      }
+    },
     width: {
       type: String,
       default: '100%'
@@ -26,6 +33,17 @@ export default {
       chart: null
     }
   },
+  watch: {
+    'storageData': {
+      handler(val) {
+        setTimeout(() => {
+          this.drawChart()
+        }, 100)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   mounted() {
     this.drawChart()
   },
@@ -125,11 +143,23 @@ export default {
           trigger: 'axis',
           axisPointer: {
             type: 'shadow'
+          },
+          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:${[params[i].color]};"></span>
+                        ${params[i].seriesName}
+                        ${params[i].data}
+                      </div>`
+            }
+            return res
           }
         },
         legend: { // 图例
           data: ['出库', '入库'],
-          right: 60,
+          right: 20,
+          top: 10,
           icon: 'circle',
           textStyle: {
             color: '#fff'
@@ -139,13 +169,13 @@ export default {
           left: '3%',
           right: '3%',
           bottom: '8%',
-          top: '15%',
+          top: '17%',
           containLabel: true
         },
         xAxis: [{
           type: 'category',
           axisTick: { show: false },
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          data: this.storageData.storageMonths,
           axisLine: {// 轴线的颜色以及宽度
             lineStyle: {
               color: '#113D72'
@@ -155,6 +185,9 @@ export default {
             show: true,
             textStyle: {
               color: '#fff'
+            },
+            formatter: function(value) {
+              return echarts.format.formatTime('M月', new Date(value))
             }
           },
           splitLine: {// 分割线配置
@@ -199,7 +232,7 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [320, 332, 401, 334, 390, 320, 332, 301, 334, 390, 320, 332],
+            data: this.storageData.outStorageData,
             color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
               {
                 offset: 0,
@@ -220,7 +253,7 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 220, 182],
+            data: this.storageData.inStorageData,
             color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
               {
                 offset: 0,

src/views/system/archiveStatistics/module/lineEchart.vue

@@ -11,6 +11,13 @@ export default {
   name: 'AcrossEcharts',
   mixins: [resize],
   props: {
+    addArcivesData: {
+      type: Object,
+      require: true,
+      default: function() {
+        return {}
+      }
+    },
     width: {
       type: String,
       default: '100%'
@@ -25,8 +32,20 @@ export default {
       chart: null
     }
   },
+  watch: {
+    'addArcivesData': {
+      handler(val) {
+        setTimeout(() => {
+          this.drawChart()
+        }, 100)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   mounted() {
     this.drawChart()
+    console.log(this.year)
     window.addEventListener('resize', this.__resizeHandler)
   },
   methods: {
@@ -49,10 +68,22 @@ export default {
             label: {
               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,
           axisLine: {// 轴线的颜色以及宽度
             lineStyle: {
               color: '#113D72'
@@ -62,10 +93,11 @@ export default {
             show: true,
             textStyle: {
               color: '#fff'
-            }
             },
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
-
+            formatter: function(value) {
+              return echarts.format.formatTime('M月', new Date(value))
+            }
+          }
         },
         yAxis: {
           type: 'value',
@@ -95,7 +127,8 @@ export default {
         },
         series: [
           {
-            data: [450, 430, 524, 418, 735, 547, 660, 750, 630, 524, 618, 335],
+            name: '新增档案',
+            data: this.addArcivesData.addArcivesNum,
             type: 'line',
             areaStyle: {
               normal: {