diff --git a/package.json b/package.json
index 411fd66..2cb8cea 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "clipboard": "2.0.8",
     "core-js": "3.19.1",
     "echarts": "4.9.0",
+    "v-charts": "^1.19.0",
     "element-ui": "2.15.8",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
diff --git a/src/main.js b/src/main.js
index bd2b6a2..7253045 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,6 +13,7 @@ import router from './router'
 import directive from './directive' // directive
 import plugins from './plugins' // plugins
 import { download } from '@/utils/request'
+import VCharts from 'v-charts'
 
 import './assets/icons' // icon
 import './permission' // permission control
@@ -67,6 +68,7 @@ Vue.component('DictSelect',DictSelect)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
+Vue.use(VCharts)
 DictData.install()
 
 /**
diff --git a/src/utils/date.js b/src/utils/date.js
new file mode 100644
index 0000000..7c1a591
--- /dev/null
+++ b/src/utils/date.js
@@ -0,0 +1,42 @@
+// date.js
+export function formatDate(date, fmt) {
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+  }
+  let o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds()
+  };
+  for (let k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+      let str = o[k] + '';
+      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
+    }
+  }
+  return fmt;
+}
+
+function padLeftZero(str) {
+  return ('00' + str).substr(str.length);
+}
+
+export function str2Date(dateStr, separator) {
+  if (!separator) {
+    separator = "-";
+  }
+  let dateArr = dateStr.split(separator);
+  let year = parseInt(dateArr[0]);
+  let month;
+  //处理月份为04这样的情况
+  if (dateArr[1].indexOf("0") == 0) {
+    month = parseInt(dateArr[1].substring(1));
+  } else {
+    month = parseInt(dateArr[1]);
+  }
+  let day = parseInt(dateArr[2]);
+  let date = new Date(year, month - 1, day);
+  return date;
+}
diff --git a/src/views/index.vue b/src/views/index.vue
index 3ecf4ee..879b4a5 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -65,30 +65,107 @@
                 router-link(to="/relation/carrier") 4
               li.da
                 router-link(to="/item") 3
-    el-card(style="margin: 20px 20px; font-size: 14px")
-      div(slot="header")
-        span 发展历程
-      el-timeline
-        el-timeline-item(placement="top" timestamp="2018年")
-          el-card
-            h4 参与京东服务市场商品分析应用开发，参与京东服务市场会员积分应用开发
-        el-timeline-item(placement="top" timestamp="2019年")
-          el-card
-            h4 参与京东服务市场商品搬家应用开发，参与京东服务市场商品搬家应用开发，参与拼多多服务市场订单应用开发
-        el-timeline-item(placement="top" timestamp="2020年")
-          el-card
-            h4 所参与开发的拼多多订单应用排名服务市场类目第一，开始快手服务市场订单应用开发
-        el-timeline-item(placement="top" timestamp="2021年")
-          el-card
-            h4 日处理拼多多订单200万条，开始美团、饿了么应用市场应用开发
-        el-timeline-item(placement="top" timestamp="2022年")
-          el-card
-            h4 累计服务10万+电商平台店铺、5万+外卖店铺。开始抖音、淘宝服务市场订单应用开发，开源ruoyi-wms
+    el-row.pl20.pr20(:gutter="10")
+      el-col(:span="16")
+        el-card(style="margin: 20px 20px; font-size: 14px")
+          div(slot="header")
+            span 订单统计
+          el-row
+            el-col(:span="4")
+              div(style="padding: 20px")
+                div
+                  div(style="color: #909399;font-size: 14px") 本月订单总数
+                  div(style="color: #606266;font-size: 24px;padding: 10px 0") 10000
+                  div
+                    span.color-success(style="font-size: 14px") +10%
+                    span(style="color: #C0C4CC;font-size: 14px") 同比上月
+                div(style="margin-top: 20px;")
+                  div(style="color: #909399;font-size: 14px") 本周订单总数
+                  div(style="color: #606266;font-size: 24px;padding: 10px 0") 1000
+                  div
+                    span.color-danger(style="font-size: 14px") -10%
+                    span(style="color: #C0C4CC;font-size: 14px") 同比上周
+                div(style="margin-top: 20px;")
+                  div(style="color: #909399;font-size: 14px") 本月销售总额
+                  div(style="color: #606266;font-size: 24px;padding: 10px 0") 100000
+                  div
+                    span.color-success(style="font-size: 14px") +10%
+                    span(style="color: #C0C4CC;font-size: 14px") 同比上月
+                div(style="margin-top: 20px;")
+                  div(style="color: #909399;font-size: 14px") 本周销售总额
+                  div(style="color: #606266;font-size: 24px;padding: 10px 0") 50000
+                  div
+                    span.color-danger(style="font-size: 14px") -10%
+                    span(style="color: #C0C4CC;font-size: 14px") 同比上周
+            el-col(:span="20")
+              div(style="padding: 10px;border-left:1px solid #DCDFE6")
+                el-date-picker(
+                  v-model="orderCountDate"
+                  align="right"
+                  end-placeholder="结束日期"
+                  :picker-options="pickerOptions"
+                  range-separator="至"
+                  size="small"
+                  start-placeholder="开始日期"
+                  style="float: right;z-index: 1"
+                  type="daterange"
+                  unlink-panels
+                  @change="handleDateChange"
+                )
+                div
+                  ve-line(
+                    :data-empty="dataEmpty"
+                    :data="chartData"
+                    :legend-visible="false"
+                    :loading="loading"
+                    :settings="chartSettings"
+                  )
+      el-col(:span="8")
+        el-card(style="margin: 20px 20px; font-size: 14px")
+          div(slot="header")
+            span 发展历程
+          el-timeline
+            el-timeline-item(placement="top" timestamp="2018年")
+              el-card
+                h4 参与京东服务市场商品分析应用开发，参与京东服务市场会员积分应用开发
+            el-timeline-item(placement="top" timestamp="2019年")
+              el-card
+                h4 参与京东服务市场商品搬家应用开发，参与京东服务市场商品搬家应用开发，参与拼多多服务市场订单应用开发
+            el-timeline-item(placement="top" timestamp="2020年")
+              el-card
+                h4 所参与开发的拼多多订单应用排名服务市场类目第一，开始快手服务市场订单应用开发
+            el-timeline-item(placement="top" timestamp="2021年")
+              el-card
+                h4 日处理拼多多订单200万条，开始美团、饿了么应用市场应用开发
+            el-timeline-item(placement="top" timestamp="2022年")
+              el-card
+                h4 累计服务10万+电商平台店铺、5万+外卖店铺。开始抖音、淘宝服务市场订单应用开发，开源ruoyi-wms
 </template>
 
 <script>
+import {str2Date} from '@/utils/date';
 import PanelGroup from '@/views/components/PanelGroup'
 import { mapGetters } from 'vuex'
+const DATA_FROM_BACKEND = {
+    columns: ['date', 'orderCount','orderAmount'],
+    rows: [
+      {date: '2018-11-01', orderCount: 10, orderAmount: 1093},
+      {date: '2018-11-02', orderCount: 20, orderAmount: 2230},
+      {date: '2018-11-03', orderCount: 33, orderAmount: 3623},
+      {date: '2018-11-04', orderCount: 50, orderAmount: 6423},
+      {date: '2018-11-05', orderCount: 80, orderAmount: 8492},
+      {date: '2018-11-06', orderCount: 60, orderAmount: 6293},
+      {date: '2018-11-07', orderCount: 20, orderAmount: 2293},
+      {date: '2018-11-08', orderCount: 60, orderAmount: 6293},
+      {date: '2018-11-09', orderCount: 50, orderAmount: 5293},
+      {date: '2018-11-10', orderCount: 30, orderAmount: 3293},
+      {date: '2018-11-11', orderCount: 20, orderAmount: 2293},
+      {date: '2018-11-12', orderCount: 80, orderAmount: 8293},
+      {date: '2018-11-13', orderCount: 100, orderAmount: 10293},
+      {date: '2018-11-14', orderCount: 10, orderAmount: 1293},
+      {date: '2018-11-15', orderCount: 40, orderAmount: 4293}
+    ]
+  };
 
 export default {
   components: {
@@ -96,11 +173,43 @@ export default {
   },
   data() {
     return {
-      tableData: [{
-        date: '1',
-        name: '应急',
-        address: '20'
-      }],
+      pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              let start = new Date();
+              start.setFullYear(2018);
+              start.setMonth(10);
+              start.setDate(1);
+              end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一月',
+            onClick(picker) {
+              const end = new Date();
+              let start = new Date();
+              start.setFullYear(2018);
+              start.setMonth(10);
+              start.setDate(1);
+              end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        orderCountDate: '',
+        chartSettings: {
+          xAxisType: 'time',
+          area:true,
+          axisSite: { right: ['orderAmount']},
+        labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额'}},
+        chartData: {
+          columns: [],
+          rows: []
+        },
+      loading: false,
+      dataEmpty: false,
       nowTime: '',
       hello: ''
     }
@@ -111,9 +220,41 @@ export default {
   created() {
     this.showTimes()
     this.helloTimes()
+    this.initOrderCountDate()
+    this.getData()
   },
   methods: {
-
+    handleDateChange(){
+        this.getData();
+      },
+      initOrderCountDate(){
+        let start = new Date();
+        start.setFullYear(2018);
+        start.setMonth(10);
+        start.setDate(1);
+        const end = new Date();
+        end.setTime(start.getTime() + 1000 * 60 * 60 * 24 * 7);
+        this.orderCountDate=[start,end];
+      },
+      getData(){
+        setTimeout(() => {
+          this.chartData = {
+            columns: ['date', 'orderCount','orderAmount'],
+            rows: []
+          };
+          for(let i=0;i<DATA_FROM_BACKEND.rows.length;i++){
+            let item=DATA_FROM_BACKEND.rows[i];
+            let currDate=str2Date(item.date);
+            let start=this.orderCountDate[0];
+            let end=this.orderCountDate[1];
+            if(currDate.getTime()>=start.getTime()&&currDate.getTime()<=end.getTime()){
+              this.chartData.rows.push(item);
+            }
+          }
+          this.dataEmpty = false;
+          this.loading = false
+        }, 1000)
+      },
     timeFormate(timeStamp) {
       let year = new Date(timeStamp).getFullYear()
       let month =