档案业务统计

src/api/book.js

@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+export function getBooks(params) {
+  return request({
+    url: '/api/admin/other/audit-chart',
+    method: 'get',
+    params:params
+  })
+}
+
+export function getRecordsCharts(params) {
+  return request({
+    url: '/api/admin/other/records',
+    method: 'get',
+    params:params
+  })
+}
+
+export function getApplyCharts(params) {
+  return request({
+    url: '/api/admin/other/apply',
+    method: 'get',
+    params:params
+  })
+}

src/views/book/index.vue

@@ -4,66 +4,102 @@
     <div ref="lxHeader">
       <lx-header icon="md-apps" :text="bookName" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
       </lx-header>
-    </div>
-    <div class="wrap" :style="{'height':mapHeight+'px'}">
-      <echartsLine ref="echartsLine1" :rotate="60" :color="['#147d38','#333']" :lineDataX='monthX' :lineDataY='monthY'></echartsLine>
+    </div>
+    <div class="wrap" :style="{'height':mapHeight+'px'}">
+      <echartsLine v-if="showCharts" ref="echartsLine1" :rotate="60" :color="['#147d38','#333']" :lineDataX='monthX' :lineDataY='monthY'>
+      </echartsLine>
     </div>
   </div>
 </template>
 
-<script>
-  import echartsLine from "@/views/jsc/components/echartsLine.vue";
-  export default {
-    components: {
-      echartsLine
-    },
-    data(){
-      return{
-        bookName:'',
-        mapHeight:0,
-        monthX: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-        monthY: [5, 6, 7, 8, 9, 10, 12, 5, 6, 7, 8, 9],
-        bookTypeList:{
-          number:'残疾人证台账',
-          drug:'免费服药台账',
-          children:'儿童康复台账',
-          help:'辅具适配台账',
-          health:'社区康复台账',
-          student:'优秀学生奖学金台账',
-          education:'教育专项台账',
-          raise:'托养台账',
-          cars:'燃油补贴台账',
-          address:'创业场地补贴台账',
-          starts:'创业补贴台账',
+<script>
+  import echartsLine from "@/views/jsc/components/echartsLine.vue";
+  import {
+    getBooks
+  } from "@/api/book.js"
+  export default {
+    components: {
+      echartsLine
+    },
+    data() {
+      return {
+        bookName: '',
+        tableNames: '',
+        mapHeight: 0,
+        monthX: [],
+        monthY: [],
+        showCharts:false,
+        tableNameObjs: {
+          number: 'disabilities',
+          drug: 'medicines',
+          children: 'childrens',
+          help: 'assists',
+          health: 'communities',
+          student: 'students',
+          education: 'educations',
+          raise: 'raises',
+          cars: 'fuels',
+          address: 'starts_addresses',
+          starts: 'starts_subsidys'
+        },
+        bookTypeObjs: {
+          number: '残疾人证台账',
+          drug: '免费服药台账',
+          children: '儿童康复台账',
+          help: '辅具适配台账',
+          health: '社区康复台账',
+          student: '优秀学生奖学金台账',
+          education: '教育专项台账',
+          raise: '托养台账',
+          cars: '燃油补贴台账',
+          address: '创业场地补贴台账',
+          starts: '创业补贴台账'
+        }
+      }
+
+    },
+    created() {
+      this.initHeight()
+      if (this.$route.path) {
+        let path = this.$route.path.split("_")[1]
+        console.log(path)
+        for (var k in this.bookTypeObjs) {
+          if (path == k) {
+            this.bookName = this.bookTypeObjs[k]
+          }
         }
-      }
-
-    },
-    created(){
-      this.initHeight()
-      if(this.$route.path){
-        let path = this.$route.path.split("_")[1]
-        console.log(path)
-        for(var k in this.bookTypeList){
-          if(path==k){
-            this.bookName = this.bookTypeList[k]
+        for (var k in this.tableNameObjs) {
+          if (path == k) {
+            this.tableNames = this.tableNameObjs[k]
+            this.getCharts()
           }
-        }
-      }
-    },
-    methods: {
-      initHeight() {
-        let winHeight = document.body.clientHeight
-        this.mapHeight = winHeight - 50 - 20
-        console.log(winHeight)
+        }
+      }
+    },
+    methods: {
+      initHeight() {
+        let winHeight = document.body.clientHeight
+        this.mapHeight = winHeight - 50 - 20
       },
-    },
-
+     async getCharts(){
+        const res = await getBooks({
+          table_name: this.tableNames,
+        })
+        for(var m of res){
+          this.monthX.push(m.month)
+          this.monthY.push(m.total)
+        }
+        this.showCharts = true
+        console.log('res',res)
+        console.log(this.monthX)
+      }
+    },
+
   }
 </script>
 
-<style>
-  .wrap{
-    width:100%;
+<style>
+  .wrap {
+    width: 100%;
   }
 </style>

src/views/reports/business.vue

@@ -4,43 +4,126 @@
     <div ref="lxHeader">
       <lx-header icon="md-apps" text="业务统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
       </lx-header>
-    </div>
-    <div class="wrap" :style="{'height':mapHeight+'px'}">
-      <echartsLine ref="echartsLine1" :rotate="60" :color="['#147d38','#333']" :lineDataX='monthX' :lineDataY='monthY'></echartsLine>
+    </div>
+    <div class="wrap" :style="{'height':mapHeight+'px'}">
+      <div>
+        <el-date-picker @change="changeDate" v-model="dateRange" value-format="yyyy-MM-dd" type="daterange"
+          :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+          align="right">
+        </el-date-picker>
+      </div>
+      <echartsLine v-if="showCharts" ref="echartsLine1" :rotate="60" :color="['#147d38','#333']" :lineDataX='monthX'
+        :lineDataY='monthY'></echartsLine>
     </div>
   </div>
 </template>
 
-<script>
-  import echartsLine from "@/views/jsc/components/echartsLine.vue";
-  export default {
-    components: {
-      echartsLine
-    },
-    data(){
-      return{
-        mapHeight:0,
-        monthX: ['残疾人证', '自主创业', '经营场地', '教育专项', '励志奖学金', '燃油补贴', '健康体检', '托养', '无障碍改造', '康复设备', '社区康复', '辅具适配','儿童康复','免费用药'],
-        monthY: [5, 6, 7, 8, 9, 10, 12, 5, 6, 7, 8, 9,7,2],
-      }
-
-    },
-    created(){
-      this.initHeight()
-    },
-    methods: {
-      initHeight() {
-        let winHeight = document.body.clientHeight
-        this.mapHeight = winHeight - 50 - 20
-        console.log(winHeight)
-      },
-    },
-
+<script>
+  import echartsLine from "./components/echartsLine.vue";
+  import {
+    getApplyCharts
+  } from "@/api/book.js";
+
+  export default {
+    components: {
+      echartsLine
+    },
+    data() {
+      return {
+        mapHeight: 0,
+        showCharts: false,
+        start_date: '',
+        end_date: '',
+        dateRange: [],
+        pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        monthX: [],
+        monthY: [{
+            name: '总数',
+            type: 'bar',
+            data: []
+          }
+          // {
+          //   name:'待审核',
+          //   type:'bar',
+          //   data:[5, 6, 7, 8, 9, 10, 12, 5, 6, 7, 8, 9,7,2]
+          // },{
+          //   name:'退回',
+          //   type:'bar',
+          //   data:[5, 6, 7, 8, 9, 10, 12, 5, 6, 7, 8, 9,7,2]
+          // }
+        ],
+      }
+
+    },
+    created() {
+      this.initHeight()
+      this.getCharts()
+    },
+    methods: {
+      initHeight() {
+        let winHeight = document.body.clientHeight
+        this.mapHeight = winHeight - 150
+        console.log(winHeight)
+      },
+      changeDate(e) {
+        var that = this;
+        if (e) {
+          this.dateRange = e;
+          that.start_date = e[0];
+          that.end_date = e[1];
+        } else {
+          this.dateRange = [];
+          that.start_date = '';
+          that.end_date = '';
+        }
+
+        this.getCharts();
+      },
+      getCharts() {
+        this.showCharts = false
+        this.monthX = []
+        this.monthY[0].data = []
+        getApplyCharts().then(res => {
+          for (var k of res) {
+            this.monthX.push(k.name)
+            this.monthY[0].data.push(k.total)
+          }
+          this.showCharts = true
+        })
+      },
+    },
+
   }
 </script>
 
-<style>
-  .wrap{
-    width:100%;
+<style>
+  .wrap {
+    width: 100%;
   }
 </style>

src/views/reports/components/echartsLine.vue

@@ -0,0 +1,95 @@
+<template>
+  <div style="width:100%;height:100%" ref="chartsDOM">
+
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+  export default {
+  props:{
+    lineDataX:{
+      type:Array,
+      default:{}
+    },
+    lineDataY:{
+      type:Array,
+      default:{}
+    },
+    rotate:{
+      type:Number,
+      default:0
+    },
+    color:{
+      type:Array,
+      default:()=>{
+        return ['#00ffff','#fff']
+      }
+    }
+  },
+    data() {
+      return {
+        myChart: null
+      }
+    },
+    mounted() {
+      this.initEchartsMap()
+    },
+    methods: {
+      initEchartsMap() {
+        this.myChart = echarts.init(this.$refs["chartsDOM"]);
+        var option = {
+          color: [this.color[0]],
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: { // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          grid: {
+            left: '4%',
+            right: '4%',
+            bottom: '8%',
+            top: "8%",
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            data: this.lineDataX,
+            axisTick: {
+              alignWithLabel: true
+            },
+            axisLabel: {
+              show:true,
+              interval: 0,
+              rotate: this.rotate,
+              textStyle: {
+                show: true,
+                color: this.color[1]
+              },
+            }
+          }],
+          yAxis: [{
+            type: 'value',
+            axisLabel: {
+              textStyle: {
+                show: true,
+                color: this.color[1]
+              },
+            }
+          }],
+          series: this.lineDataY
+        };
+        this.myChart.setOption(option);
+      },
+      resetCharts() {
+        this.myChart.resize()
+      }
+    }
+
+
+  }
+</script>
+
+<style>
+</style>

src/views/reports/record.vue

@@ -6,13 +6,15 @@
       </lx-header>
     </div>
     <div class="wrap" :style="{'height':mapHeight+'px'}">
-      <echartsLine ref="echartsLine1" :rotate="60" :color="['#147d38','#333']" :lineDataX='monthX' :lineDataY='monthY'></echartsLine>
+      <echartsLine v-if="showCharts" ref="echartsLine1" :rotate="60" :color="['#147d38','#333']" :lineDataX='monthX' :lineDataY='monthY'></echartsLine>
     </div>
   </div>
 </template>
 
 <script>
-  import echartsLine from "@/views/jsc/components/echartsLine.vue";
+  import echartsLine from "./components/echartsLine.vue";
+  import {getRecordsCharts} from "@/api/book.js";
+
   export default {
     components: {
       echartsLine
@@ -20,18 +22,32 @@
     data(){
       return{
         mapHeight:0,
-        monthX: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-        monthY: [5, 6, 7, 8, 9, 10, 12, 5, 6, 7, 8, 9],
+        showCharts:false,
+        monthX: [],
+        monthY: [{
+          name:'人数',
+          type:'bar',
+          data:[]
+        }],
       }
 
     },
     created(){
       this.initHeight()
+      getRecordsCharts().then(res=>{
+        console.log(res)
+        this.showCharts = false
+        for(var k of res){
+          this.monthX.push(k.value)
+          this.monthY[0].data.push(k.record_total)
+        }
+        this.showCharts = true
+      })
     },
     methods: {
       initHeight() {
         let winHeight = document.body.clientHeight
-        this.mapHeight = winHeight - 50 - 20
+        this.mapHeight = winHeight - 150
         console.log(winHeight)
       },
     },

vue.config.js

@@ -25,7 +25,7 @@ module.exports = {
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
   publicPath: '/admin/',
-  outputDir: '/Users/liuxiangyu/Work/c-changzhoucanlian/APP/jintan-canlian-service/public/admin',
+  outputDir: '/Users/mac/Documents/朗业/2023/j-金坛残联/jintancanlian-test/public/admin',
   assetsDir: 'static',
   css: {
     loaderOptions: { // 向 CSS 相关的 loader 传递选项