From 12e402e5f9df4d48153ae99a120fb3dc0e33b771 Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Fri, 7 Jul 2023 10:17:08 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=20=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/charts.js                             |  20 ++
 src/utils/auth.js                             |  29 +-
 src/views/dashboard/components/LineChart.vue  | 143 +++++++++
 src/views/dashboard/components/PanelGroup.vue | 119 ++-----
 src/views/dashboard/index.vue                 | 301 +++++++++---------
 src/views/reports/components/echartsLine.vue  |  25 +-
 src/views/reports/outbounds.vue               | 201 ++++++++++--
 src/views/reports/stocks.vue                  | 201 ++++++++++--
 8 files changed, 717 insertions(+), 322 deletions(-)
 create mode 100644 src/api/charts.js
 create mode 100644 src/views/dashboard/components/LineChart.vue

diff --git a/src/api/charts.js b/src/api/charts.js
new file mode 100644
index 0000000..8543069
--- /dev/null
+++ b/src/api/charts.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function stocksCharts(params) {
+  return request({
+    url: '/api/admin/chart/stocks',
+    method: 'get',
+    params:params
+  })
+}
+
+export function outboundsCharts(params) {
+  return request({
+    url: '/api/admin/chart/outbounds',
+    method: 'get',
+    params:params
+  })
+}
+
+
+
diff --git a/src/utils/auth.js b/src/utils/auth.js
index e1a5cea..b47e5c1 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -2,14 +2,23 @@ import Cookies from 'js-cookie'
 
 const TokenKey = 'patrol_wzgl_token'
 
-export function getToken() {
-  return Cookies.get(TokenKey)
-}
-
-export function setToken(token) {
-  return Cookies.set(TokenKey, token)
-}
-
-export function removeToken() {
-  return Cookies.remove(TokenKey)
+export function getToken() {
+  //return Cookies.get(TokenKey)
+
+  if (Cookies.get(TokenKey)) {
+    return Cookies.get(TokenKey)
+  } else {
+    return sessionStorage.getItem(TokenKey);
+  }
+}
+
+export function setToken(token) {
+  sessionStorage.setItem(TokenKey, token);
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  sessionStorage.clear();
+  return Cookies.remove(TokenKey)
+
 }
diff --git a/src/views/dashboard/components/LineChart.vue b/src/views/dashboard/components/LineChart.vue
new file mode 100644
index 0000000..73ffc34
--- /dev/null
+++ b/src/views/dashboard/components/LineChart.vue
@@ -0,0 +1,143 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+
+</template>
+
+<script>
+  import echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+
+  const animationDuration = 6000
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '400px'
+      },
+      chartData: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.setOptions(this.chartData);
+      },
+      setOptions(chartdata) {
+        console.log(chartdata.xArr)
+        this.chart.setOption({
+          dataZoom: [
+            //给x轴设置滚动条
+            // {
+            //   startValue: 0,
+            //   endValue: 6, // 显示条数
+            //   type: 'slider',
+            //   show: true,
+            //   xAxisIndex: [0],
+            //  // handleSize: 0, //滑动条的 左右2个滑动条的大小
+            //   height: 8, //组件高度
+            //   left: 50, //左边的距离
+            //   right: 40, //右边的距离
+            //   bottom: 26, //右边的距离
+            //   handleColor: '#EFEFEF', //h滑动图标的颜色
+            //   handleStyle: {
+            //     borderColor: '#409EFF',
+            //     borderWidth: '1',
+            //     shadowBlur: 2,
+            //     background: '#EFEFEF',
+            //     shadowColor: '#EFEFEF'
+            //   },
+            //   fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+            //       //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+            //       //给第一个设置0，第四个设置1，就是垂直渐变
+            //       offset: 0,
+            //       color: '#409EFF'
+            //     },
+            //     {
+            //       offset: 1,
+            //       color: '#409EFF'
+            //     }
+            //   ]),
+            //   backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
+            //   showDataShadow: false, //是否显示数据阴影 默认auto
+            //   showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+            //   handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+            //   filterMode: 'filter'
+            // }
+            //下面这个属性是里面拖到
+            //   {
+            //     type: 'inside',
+            //     show: true,
+            //     xAxisIndex: [0],
+            //     start: 0, //默认为1
+            //     end: 50,
+            //   },
+          ],
+          legendArr:[],
+          legend: {
+            orient: 'horizontal',
+            bottom: '3%',
+            data:chartdata.legendArr
+          },
+            tooltip: {
+              trigger: 'axis'
+            },
+            backgroundColor:"#fff",
+          grid: {
+            top: '3%',
+            left: '2%',
+            right: '2%',
+            bottom: '12%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            data: chartdata.xArr,
+          }],
+          yAxis: [{
+            type: 'value',
+            minInterval: 1,
+          }],
+          series: chartdata.series
+        })
+
+      }
+    }
+  }
+</script>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index ffc9509..0635b5c 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -3,105 +3,43 @@
     <div class="boxlist">
       <div class="box box1">
         <div class="boxtitle">
-          <span>营业统计</span>
+          <span>当日出入库</span>
           <i class="el-icon-data-line statIcon"></i>
         </div>
         <div class="bline"></div>
-        <div class="boxcontentsubtitle">服务金额</div>
         <div class="boxcontent">
           <div class="boxcontentitem">
-            <div class="boxcontentitem-big">
-              {{totaldata.business.server_money_total}}
-            </div>
             <div style="display: flex;justify-content: space-around;">
               <div class="boxcontentitem-small">
-                <span>{{totaldata.business.nurse_money_total}}</span>
-                <span>护工金额</span>
+                <span>{{totaldata.day.ruku}}</span>
+                <span>入库</span>
               </div>
               <div class="boxcontentitem-small">
-                <span>{{totaldata.business.remain_money_total}}</span>
-                <span>留存金额</span>
+                <span>{{totaldata.day.chuku}}</span>
+                <span>出库</span>
               </div>
             </div>
           </div>
         </div>
-      </div>
-
-      <div class="box box2">
-        <div class="boxtitle">
-
-          <span>人效统计</span>
-          <i class="el-icon-user statIcon"></i>
-        </div>
-        <div class="bline"></div>
-        <div class="boxcontentsubtitle">总服务时长</div>
-        <div class="boxcontent">
-          <div class="boxcontentitem">
-            <div class="boxcontentitem-big">
-              {{totaldata.person_efficiency.server_time_total}}
-              分钟
-            </div>
-            <div style="display: flex;justify-content: space-around;">
-              <div class="boxcontentitem-small">
-
-                <span>{{totaldata.person_efficiency.expect}}</span>
-                <span> 照护人员数</span>
-              </div>
-              <div class="boxcontentitem-small">
-                <span>{{totaldata.person_efficiency.act}} </span>
-                <span>天数</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="box box3">
-        <div class="boxtitle">
-          <span>客户统计</span>
-          <i class="el-icon-s-custom statIcon"></i>
-        </div>
-        <div class="bline"></div>
-        <div class="boxcontentsubtitle">活跃客户</div>
-        <div class="boxcontent">
-          <div class="boxcontentitem">
-            <div class="boxcontentitem-big">
-              {{totaldata.customer.active}}人
-            </div>
-            <div style="display: flex;justify-content: space-around;">
-              <div class="boxcontentitem-small">
-                <span>{{totaldata.customer.add}}</span>
-                <span>新增</span>
-              </div>
-              <div class="boxcontentitem-small">
-                <span>{{totaldata.customer.wash}}</span>
-                <span>流失</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      </div>
 
       <div class="box box4">
         <div class="boxtitle">
 
-          <span>订单统计</span>
+          <span>当月出入库</span>
           <i class="el-icon-document statIcon"></i>
         </div>
         <div class="bline"></div>
-        <div class="boxcontentsubtitle">服务订单</div>
         <div class="boxcontent">
           <div class="boxcontentitem">
-            <div class="boxcontentitem-big">{{totaldata.order.server_total}}单
-            </div>
             <div style="display: flex;justify-content: space-around;">
               <div class="boxcontentitem-small">
-                <span>{{totaldata.order.cycle_total}}</span>
-                <span>周期性订单</span>
+                <span>{{totaldata.month.ruku}}</span>
+                <span>入库</span>
               </div>
               <div class="boxcontentitem-small">
-                <span>{{totaldata.order.unit_total}}</span>
-                <span>单次订单</span>
+                <span>{{totaldata.month.chuku}}</span>
+                <span>出库</span>
               </div>
             </div>
           </div>
@@ -122,27 +60,14 @@
       totaldata: {
         type: Object,
         default: {
-
-          "business": {
-            "server_money_total": 0,
-            "nurse_money_total": 0,
-            "remain_money_total": 0
-          },
-          "person_efficiency": {
-            "server_time_total": "0",
-            "expect": 0,
-            "act": 0
-          },
-          "customer": {
-            "active": 0,
-            "add": 0,
-            "wash": 0
-          },
-          "order": {
-            "server_total": 0,
-            "cycle_total": 0,
-            "unit_total": 0
+          "day": {
+            "ruku": 0,
+            "chuku": 0
           },
+          "month": {
+            "ruku": 0,
+            "chuku": 0
+          }
         }
       }
     },
@@ -185,7 +110,7 @@
 
 
   .boxcontentitem-small {
-    font-size: 16px;
+    font-size: 30px;
     display: flex;
     flex-direction: column;
   }
@@ -193,9 +118,9 @@
 
   .box {
     position: relative;
-    width: 33%;
-    margin-left: 0.5%;
-    margin-right: 0.5%;
+    width: 48%;
+    margin-left: 1%;
+    margin-right: 1%;
     margin-bottom: 2.375rem;
     box-shadow: 0px 8px 15px 0px rgba(212, 84, 32, 0.3100);
     border-radius: 8px;
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 3e3f399..9694708 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -4,180 +4,185 @@
     <div class="statistics">
       <panel-group :totaldata="list" />
     </div>
+    <div>
+      <el-row :gutter="32">
+        <el-col :xs="24" :sm="24" :lg="24">
+          <div class="chart-wrapper">
+            <div class="chart-title">
+              <span>出入库统计</span>
+              <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>
+            <line-chart :height="'500px'" :chartData="lineArr" />
+          </div>
+        </el-col>
+      </el-row>
+    </div>
 
 
   </div>
 </template>
 
 <script>
-  import echarts from "echarts"
+  import LineChart from './components/LineChart'
   import PanelGroup from './components/PanelGroup'
   import {
     getChartsHome
-  } from "../../api/dashboard.js"
+  } from "../../api/dashboard.js"
+  import {
+    stocksCharts
+  } from "@/api/charts.js"
+  import {
+    outboundsCharts
+  } from "@/api/charts.js"
 
   export default {
     components: {
-      PanelGroup
+      PanelGroup,
+      LineChart
     },
     data() {
       return {
-        col: '',
-        line: '',
-        business_data: [],
-        collect_data: [],
+        start_time: '',
+        end_time: '',
+        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]);
+            }
+          }]
+        },
         list: {},
-        customerArr: [],
-        orderArr: [],
-        chartData: {},
+        lineArr: {
+          xArr: [],
+          legendArr: ["入库", "出库"],
+          series: [{
+              name: '入库',
+              type: 'line',
+              stack: 'Total',
+              data: []
+            },
+            {
+              name: '出库',
+              type: 'line',
+              stack: 'Total',
+              data: []
+            }
+          ]
+        }
       }
     },
     watch: {
-      chartData(val, newval) {
-        if (newval){
-          this.init();
-        }
-      }
+
     },
     methods: {
+      changeDate(e) {
+        var that = this;
+        this.dateRange = e;
+        that.start_time = e[0];
+        that.end_time = e[1];
+        this.loadChart();
+      },
       async loadData() {
         await getChartsHome().then((res) => {
           console.log(res);
-          this.list = res.list;
-          this.chartData = res;
-          let _business_data = [];
-          let _collect_data = [];
-          res.business_data.map(item => {
-            _business_data.push(item.server_money_total)
-            _collect_data.push(item.collect_money)
-          })
-          this.business_data = _business_data;
-          this.collect_data = _collect_data;
-          let _customerArr = [];
-          let _orderArr = [];
-
-          res.order_data.map(item => {
-            _customerArr.push(item.active_customer)
-            _orderArr.push(item.order_total)
-          })
-          this.customerArr = _customerArr;
-          this.orderArr = _orderArr;
+          this.list = res;
         }).catch()
       },
-      init() {
-        this.col = echarts.init(document.getElementById('col-chart'))
-        this.col.setOption({
-          title: {
-            text: ''
-          },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
-            },
-            position: 'bottom'
-          },
-          legend: {},
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-          },
-          yAxis: {
-            type: 'value',
-            boundaryGap: [0, 0.01]
-          },
-          xAxis: {
-            type: 'category',
-            data: ['第一周', '第二周', '第三周', '第四周']
-          },
-          series: [{
-              name: '服务金额',
-              type: 'bar',
-              data: this.business_data,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(42,182,252)'
-                },
-              },
-            },
-            {
-              name: '收款',
-              type: 'bar',
-              data: this.collect_data,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(34,228,255)'
-                },
-              },
-            }
-          ]
-        })
-
-        this.line = echarts.init(document.getElementById('line-chart'))
-        this.line.setOption({
-          title: {
-            text: ''
-          },
-          tooltip: {
-            trigger: 'axis'
-          },
-          legend: {
-            data: ['活跃客户', '服务订单']
-          },
-          grid: {
-            left: '3%',
-            right: '6%',
-            bottom: '3%',
-            containLabel: true
-          },
-          toolbox: {
-
-          },
-          xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: ['第一周', '第二周', '第三周', '第四周']
-          },
-          yAxis: {
-            type: 'value',
-          },
-          series: [{
-              name: '活跃客户',
-              type: 'line',
-              stack: 'Total',
-              data: this.customerArr,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(42,182,252)'
-                },
-              },
-            },
-            {
-              name: '服务订单',
-              type: 'line',
-              stack: 'Total',
-              data: this.orderArr,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(34,228,255)'
-                },
-              },
-            }
-          ]
-        })
+      async loadChart(){
+        let that = this
+        await stocksCharts({
+          start_time: this.start_time,
+          end_time: this.end_time
+        }).then((res) => {
+          for (var m of res) {
+            that.lineArr.xArr.push(m.date.split('-')[1] + "-" + m.date.split('-')[2]);
+            that.lineArr.series[0].data.push(m.total);
+          }
+        }).catch()
+        await outboundsCharts({
+          start_time: this.start_time,
+          end_time: this.end_time
+        }).then((res) => {
+          for (var m of res) {
+            that.lineArr.series[1].data.push(m.total);
+          }
+        }).catch()
+      },
+      getNowDate() {
+        const timeOne = new Date()
+        const year = timeOne.getFullYear()
+        let month = timeOne.getMonth() + 1
+        let day = timeOne.getDate()
+        month = month < 10 ? '0' + month : month
+        day = day < 10 ? '0' + day : day
+        const NowDate = `${year}-${month}-${day}`
+        return NowDate
+      },
+      recentTime(day, fmt, time) {
+        //获取当前时间的毫秒值
+        let now = (time ? new Date(time) : new Date()).getTime();
+        // 获取前后n天时间
+        let recent = new Date(now + day * 24 * 60 * 60 * 1000);
+
+        // key：正则匹配表达式，value：对应的时间、日期
+        let fmtObj = {
+          'M+': recent.getMonth() + 1, //月份
+          'd+': recent.getDate(), //日
+          'h+': recent.getHours(), //时
+          'm+': recent.getMinutes(), //分
+          's+': recent.getSeconds(), //秒
+        };
+        // 获取匹配年份替换
+        if (/(y+)/.test(fmt)) {
+          //RegExp.$1 匹配结果，替换成对应的长度。如：yyyy就替换成整个年份2021，yy就替换成后两位21，以此类推
+          fmt = fmt.replace(RegExp.$1, (recent.getFullYear() + '').substr(4 - RegExp.$1.length));
+        }
+        for (let key in fmtObj) {
+          if (new RegExp(`(${key})`).test(fmt)) {
+            //日期，时、分、秒替换，判断fmt是否需要补0，如：yyyy-M-d h:m:s 不补0,yyyy-MM-dd hh:mm:ss 则自动补0
+            fmt = fmt.replace(
+              RegExp.$1,
+              RegExp.$1.length == 1 ?
+              fmtObj[key] :
+              ('00' + fmtObj[key]).substr(('' + fmtObj[key]).length),
+            );
+          }
+        }
+        return fmt;
       }
     },
     created() {
-
-      //this.loadData();
+      this.start_time = this.recentTime(-14, 'yyyy-MM-dd')
+      this.end_time = this.getNowDate()
+      this.dateRange = [this.start_time,this.end_time]
+      this.loadData();
+      this.loadChart()
     },
     mounted() {
-
-
-      //this.init()
-
       window.onresize = () => {
         this.col.resize()
         this.line.resize()
@@ -191,6 +196,16 @@
 </script>
 
 <style lang="scss" scoped>
+  .chart-wrapper{
+    background:#fff;
+    padding:10px;
+    font-size:20px;
+    color:#0077CC;
+    .chart-title{
+      display: flex;
+      justify-content: space-between;
+    }
+  }
   .statistics {
     display: flex;
 
diff --git a/src/views/reports/components/echartsLine.vue b/src/views/reports/components/echartsLine.vue
index 9be419a..9b6f480 100644
--- a/src/views/reports/components/echartsLine.vue
+++ b/src/views/reports/components/echartsLine.vue
@@ -14,7 +14,7 @@
     },
     lineDataY:{
       type:Array,
-      default:{}
+      default:[]
     },
     rotate:{
       type:Number,
@@ -39,7 +39,7 @@
       initEchartsMap() {
         this.myChart = echarts.init(this.$refs["chartsDOM"]);
         var option = {
-          color: [this.color[0]],
+          color: ['#0077CC', '#0284cd', '#4cabce'],
           tooltip: {
             trigger: 'axis',
             axisPointer: { // 坐标轴指示器，坐标轴触发有效
@@ -47,10 +47,10 @@
             }
           },
           grid: {
-            left: '8%',
-            right: '8%',
-            bottom: '8%',
-            top: "8%",
+            left: '3%',
+            right: '3%',
+            bottom: '12%',
+            top: "10%",
             containLabel: true
           },
           xAxis: [{
@@ -78,12 +78,13 @@
               },
             }
           }],
-          series: [{
-            name: '数量',
-            type: 'bar',
-            barWidth: '60%',
-            data: this.lineDataY
-          }]
+          series: this.lineDataY
+          // [{
+          //   name: '数量',
+          //   type: 'bar',
+          //   barWidth: '60%',
+          //   data: this.lineDataY
+          // }]
         };
         this.myChart.setOption(option);
       },
diff --git a/src/views/reports/outbounds.vue b/src/views/reports/outbounds.vue
index aadefad..f327a99 100644
--- a/src/views/reports/outbounds.vue
+++ b/src/views/reports/outbounds.vue
@@ -4,43 +4,184 @@
     <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" :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" :lineDataX='monthX' :lineDataY='monthY'>
+      </echartsLine>
     </div>
   </div>
 </template>
 
-<script>
-  import echartsLine from "@/views/reports/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],
-      }
-
-    },
-    created(){
-      this.initHeight()
-    },
-    methods: {
-      initHeight() {
-        let winHeight = document.body.clientHeight
-        this.mapHeight = winHeight - 50 - 20
-        console.log(winHeight)
+<script>
+  import echartsLine from "@/views/reports/components/echartsLine.vue";
+  import {
+    outboundsCharts
+  } from "@/api/charts.js"
+  export default {
+    components: {
+      echartsLine
+    },
+    data() {
+      return {
+        mapHeight: 0,
+        monthX: [],
+        monthY: [{
+          name:'领用',
+          type:'bar',
+          data:[]
+        },{
+          name:'处置',
+          type:'bar',
+          data:[]
+        },{
+          name:'应急',
+          type:'bar',
+          data:[]
+        }],
+        showCharts: false,
+        start_time: '',
+        end_time: '',
+        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]);
+            }
+          }]
+        },
+      }
+
+    },
+    created() {
+      this.initHeight()
+
+    },
+    methods: {
+      initHeight() {
+        let winHeight = document.body.clientHeight
+        this.mapHeight = winHeight - 150
+        console.log(winHeight)
+        this.start_time = this.recentTime(-14, 'yyyy-MM-dd')
+        this.end_time = this.getNowDate()
+        this.dateRange = [this.start_time,this.end_time]
+        this.getCharts()
       },
-    },
-
+      changeDate(e) {
+        var that = this;
+        this.dateRange = e;
+        that.start_time = e[0];
+        that.end_time = e[1];
+        this.getCharts();
+      },
+      async getCharts() {
+        this.monthX = []
+        this.monthY=[{
+          name:'领用',
+          type:'bar',
+          data:[]
+        },{
+          name:'处置',
+          type:'bar',
+          data:[]
+        },{
+          name:'应急',
+          type:'bar',
+          data:[]
+        }],
+        this.showCharts = false
+        const res = await outboundsCharts({
+          start_time: this.start_time,
+          end_time: this.end_time
+        })
+        for (var m of res) {
+          this.monthX.push(m.date.split('-')[1] + "-" + m.date.split('-')[2])
+          for(var k of m.detail){
+            for(var j of this.monthY){
+              if(k.rukuleixing==j.name){
+                j.data.push(k.total)
+              }
+            }
+          }
+        }
+        this.showCharts = true
+      },
+      getNowDate() {
+        const timeOne = new Date()
+        const year = timeOne.getFullYear()
+        let month = timeOne.getMonth() + 1
+        let day = timeOne.getDate()
+        month = month < 10 ? '0' + month : month
+        day = day < 10 ? '0' + day : day
+        const NowDate = `${year}-${month}-${day}`
+        return NowDate
+      },
+      recentTime(day, fmt, time) {
+        //获取当前时间的毫秒值
+        let now = (time ? new Date(time) : new Date()).getTime();
+        // 获取前后n天时间
+        let recent = new Date(now + day * 24 * 60 * 60 * 1000);
+
+        // key：正则匹配表达式，value：对应的时间、日期
+        let fmtObj = {
+          'M+': recent.getMonth() + 1, //月份
+          'd+': recent.getDate(), //日
+          'h+': recent.getHours(), //时
+          'm+': recent.getMinutes(), //分
+          's+': recent.getSeconds(), //秒
+        };
+        // 获取匹配年份替换
+        if (/(y+)/.test(fmt)) {
+          //RegExp.$1 匹配结果，替换成对应的长度。如：yyyy就替换成整个年份2021，yy就替换成后两位21，以此类推
+          fmt = fmt.replace(RegExp.$1, (recent.getFullYear() + '').substr(4 - RegExp.$1.length));
+        }
+        for (let key in fmtObj) {
+          if (new RegExp(`(${key})`).test(fmt)) {
+            //日期，时、分、秒替换，判断fmt是否需要补0，如：yyyy-M-d h:m:s 不补0,yyyy-MM-dd hh:mm:ss 则自动补0
+            fmt = fmt.replace(
+              RegExp.$1,
+              RegExp.$1.length == 1 ?
+              fmtObj[key] :
+              ('00' + fmtObj[key]).substr(('' + fmtObj[key]).length),
+            );
+          }
+        }
+        return fmt;
+      }
+    },
+
   }
 </script>
 
-<style>
-  .wrap{
-    width:100%;
+<style>
+  .wrap {
+    width: 100%;
+    background-color: #fff;
+    padding:15px;
   }
 </style>
diff --git a/src/views/reports/stocks.vue b/src/views/reports/stocks.vue
index c3d71a8..834634b 100644
--- a/src/views/reports/stocks.vue
+++ b/src/views/reports/stocks.vue
@@ -4,43 +4,184 @@
     <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" :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" :lineDataX='monthX' :lineDataY='monthY'>
+      </echartsLine>
     </div>
   </div>
 </template>
 
-<script>
-  import echartsLine from "@/views/reports/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],
-      }
-
-    },
-    created(){
-      this.initHeight()
-    },
-    methods: {
-      initHeight() {
-        let winHeight = document.body.clientHeight
-        this.mapHeight = winHeight - 50 - 20
-        console.log(winHeight)
+<script>
+  import echartsLine from "@/views/reports/components/echartsLine.vue";
+  import {
+    stocksCharts
+  } from "@/api/charts.js"
+  export default {
+    components: {
+      echartsLine
+    },
+    data() {
+      return {
+        mapHeight: 0,
+        monthX: [],
+        monthY: [{
+          name:'采购',
+          type:'bar',
+          data:[]
+        },{
+          name:'盘点',
+          type:'bar',
+          data:[]
+        },{
+          name:'回库',
+          type:'bar',
+          data:[]
+        }],
+        showCharts: false,
+        start_time: '',
+        end_time: '',
+        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]);
+            }
+          }]
+        },
+      }
+
+    },
+    created() {
+      this.initHeight()
+
+    },
+    methods: {
+      initHeight() {
+        let winHeight = document.body.clientHeight
+        this.mapHeight = winHeight - 150
+        console.log(winHeight)
+        this.start_time = this.recentTime(-14, 'yyyy-MM-dd')
+        this.end_time = this.getNowDate()
+        this.dateRange = [this.start_time,this.end_time]
+        this.getCharts()
       },
-    },
-
+      changeDate(e) {
+        var that = this;
+        this.dateRange = e;
+        that.start_time = e[0];
+        that.end_time = e[1];
+        this.getCharts();
+      },
+      async getCharts() {
+        this.monthX = []
+        this.monthY=[{
+          name:'采购',
+          type:'bar',
+          data:[]
+        },{
+          name:'盘点',
+          type:'bar',
+          data:[]
+        },{
+          name:'回库',
+          type:'bar',
+          data:[]
+        }],
+        this.showCharts = false
+        const res = await stocksCharts({
+          start_time: this.start_time,
+          end_time: this.end_time
+        })
+        for (var m of res) {
+          this.monthX.push(m.date.split('-')[1] + "-" + m.date.split('-')[2])
+          for(var k of m.detail){
+            for(var j of this.monthY){
+              if(k.rukuleixing==j.name){
+                j.data.push(k.total)
+              }
+            }
+          }
+        }
+        this.showCharts = true
+      },
+      getNowDate() {
+        const timeOne = new Date()
+        const year = timeOne.getFullYear()
+        let month = timeOne.getMonth() + 1
+        let day = timeOne.getDate()
+        month = month < 10 ? '0' + month : month
+        day = day < 10 ? '0' + day : day
+        const NowDate = `${year}-${month}-${day}`
+        return NowDate
+      },
+      recentTime(day, fmt, time) {
+        //获取当前时间的毫秒值
+        let now = (time ? new Date(time) : new Date()).getTime();
+        // 获取前后n天时间
+        let recent = new Date(now + day * 24 * 60 * 60 * 1000);
+
+        // key：正则匹配表达式，value：对应的时间、日期
+        let fmtObj = {
+          'M+': recent.getMonth() + 1, //月份
+          'd+': recent.getDate(), //日
+          'h+': recent.getHours(), //时
+          'm+': recent.getMinutes(), //分
+          's+': recent.getSeconds(), //秒
+        };
+        // 获取匹配年份替换
+        if (/(y+)/.test(fmt)) {
+          //RegExp.$1 匹配结果，替换成对应的长度。如：yyyy就替换成整个年份2021，yy就替换成后两位21，以此类推
+          fmt = fmt.replace(RegExp.$1, (recent.getFullYear() + '').substr(4 - RegExp.$1.length));
+        }
+        for (let key in fmtObj) {
+          if (new RegExp(`(${key})`).test(fmt)) {
+            //日期，时、分、秒替换，判断fmt是否需要补0，如：yyyy-M-d h:m:s 不补0,yyyy-MM-dd hh:mm:ss 则自动补0
+            fmt = fmt.replace(
+              RegExp.$1,
+              RegExp.$1.length == 1 ?
+              fmtObj[key] :
+              ('00' + fmtObj[key]).substr(('' + fmtObj[key]).length),
+            );
+          }
+        }
+        return fmt;
+      }
+    },
+
   }
 </script>
 
-<style>
-  .wrap{
-    width:100%;
+<style>
+  .wrap {
+    width: 100%;
+    background-color: #fff;
+    padding:15px;
   }
 </style>