首页优化

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",

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()
 
 /**

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;
+}

src/views/index.vue

@@ -65,6 +65,62 @@
                 router-link(to="/relation/carrier") 4
               li.da
                 router-link(to="/item") 3
+    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 发展历程
@@ -87,8 +143,29 @@
 </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: [{
+      pickerOptions: {
-        date: '1',
+          shortcuts: [{
-        name: '应急',
+            text: '最近一周',
-        address: '20'
+            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 =