新增自定义日期

src/components/Home.vue

@@ -5,19 +5,38 @@
         <el-card class="rank-card" shadow="never">
           <div slot="header" class="clearfix">
             <el-row>
-              <el-col :span="12">
+              <el-col :span="4">
                 <span>排行榜</span>
               </el-col>
-              <el-col :span="12" class="option-item" style="display:flex;align-items:center;flex-direction: row-reverse;">
+              <el-col :span="20" class="option-item" style="display:flex;align-items:center;flex-direction: row-reverse;">
                 <el-select v-model="rankMsg.RankType" size="mini" style="width:120px;" placeholder="请选择"
                   @change="GetRankingList">
                   <el-option v-for="(x,i) in rankTypeList" :key="i" :label="x.name" :value="x.id"></el-option>
                 </el-select>
-                <div style="width:235px;margin-right:25px;">
+                <div  v-if="diyDateRange==''">
+                  <el-button plain size="mini" class="hide_input_time" style="margin:0 25px;">自定义日期
+                    <el-date-picker
+                    v-model="diyDateRange"
+                    type="daterange"
+                    align="right"
+                    unlink-panels
+                    ref="diydateRef"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    @change="setDiyDateRange"
+                    value-format="yyyy-MM-dd"
+                    :picker-options="pickerOptions">
+                  </el-date-picker>
+                  </el-button>
+                </div>
+                
+                <div style="width:235px;" v-if="diyDateRange==''">
                   <el-tabs v-model="currentRankRange" @tab-click="changeRankTypeHandler" class="hide-tabs-content">
                     <el-tab-pane v-for="(x,i) in dataRangeList" :key="i" :label="x.name" :name="x.id.toString()"></el-tab-pane>
                   </el-tabs>
                 </div>
+                <el-tag class="f12" size="medium" @close="clearDiyDateRange" closable v-if="diyDateRange!=''" style="margin-right:25px;">自定义日期：{{diyDateRange[0]}} 至 {{diyDateRange[1]}}</el-tag>
               </el-col>
             </el-row>
           </div>
@@ -390,6 +409,37 @@ export default {
   },
   data() {
     return {
+      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]);
+            },
+          },
+        ],
+      },
       rankType: 1,
       rankType2: "1",
       RankingList: [],
@@ -443,6 +493,7 @@ export default {
           type: "3",
         },
       ],
+      diyDateRange: "",
       currentRankType: {},
       currentRankRange: "2",
       rankMsg: {
@@ -514,6 +565,18 @@ export default {
       this.dataRangeList[3].startTime = this.formatDate(date, "YYYY", 0);
       this.dataRangeList[3].endTime = this.dataRangeList[3].startTime;
     },
+    clearDiyDateRange() {
+      this.diyDateRange = "";
+      this.changeRankTypeHandler();
+    },
+    setDiyDateRange() {
+      if (this.diyDateRange != "") {
+        this.rankMsg.QueryType = 1;
+        this.rankMsg.StartDay = this.diyDateRange[0];
+        this.rankMsg.EndDay = this.diyDateRange[1];
+        this.GetRankingList();
+      }
+    },
     changeRankTypeHandler() {
       this.clearRankMsgHandler();
       let temp = this.dataRangeList.find(
@@ -1050,4 +1113,13 @@ export default {
 .hide-tabs-content .el-tabs__nav-wrap::after {
   background: none !important;
 }
+.hide_input_time {
+  position: relative !important;
+}
+.hide_input_time .el-date-editor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+}
 </style>

src/views/workstatistics/dayStatistics.vue

 <template>
-  <div class="customerManage">
+  <div class="customerManage" style="height:100%;">
     <div class="tools">
       <div class="tools-item">
         <h1>每日引流统计</h1>
@@ -20,8 +20,8 @@
         </el-dropdown>
       </div>
     </div>
-    <div class="page-content" style="padding-bottom:20px;">
-      <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%;height:100%;" border
+    <div class="page-content" style="padding-bottom:20px;height:calc(100% - 61px);box-sizing:border-box;">
+      <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%;" height="100%" border
         :cell-class-name="tableCellClassName" :row-class-name="tableRowClassName">
         <el-table-column>
           <template slot-scope="scope">
@@ -74,16 +74,16 @@
 </template>
 
 <script>
-  import clueComponent from "@/components/clueManagement/clueComponent";
-  export default {
+import clueComponent from "@/components/clueManagement/clueComponent";
+export default {
   components: {
-      clueComponent
+    clueComponent,
   },
   data() {
     return {
       queryTime: {
-          StartTime: '',
-          EndTime: ''
+        StartTime: "",
+        EndTime: "",
       },
       drawer: false,
       isDrawer: true,
@@ -116,9 +116,9 @@
       var currentY = this.msg.YearStr;
       var currentM = this.msg.MonthStr;
       var MonthDayNum = new Date(currentY, currentM, 0).getDate(); //计算当月的天数
-        this.queryTime.StartTime = this.msg.YearStr + '-' + row.DateStr
-        this.queryTime.EndTime = this.msg.YearStr + '-' + row.DateStr
-        this.drawer = true
+      this.queryTime.StartTime = this.msg.YearStr + "-" + row.DateStr;
+      this.queryTime.EndTime = this.msg.YearStr + "-" + row.DateStr;
+      this.drawer = true;
     },
     init() {
       if (this.loading) return;
@@ -135,9 +135,7 @@
         }
       );
     },
-      tableRowClassName({
-        row
-      }) {
+    tableRowClassName({ row }) {
       let cname = "font-size-12";
       if (
         row.DateStr == "总数" ||
@@ -150,12 +148,10 @@
       }
       return cname;
     },
-      tableCellClassName({
-        row,
-        column
-      }) {
+    tableCellClassName({ row, column }) {
       if (
-          row[column.property] && row[column.property].toString().indexOf("-") != -1 &&
+        row[column.property] &&
+        row[column.property].toString().indexOf("-") != -1 &&
         column.property != "DateStr"
       ) {
         return "warning-col";
@@ -192,33 +188,33 @@
       );
     },
   },
-  };
+};
 </script>
 
 <style>
-  @import "../../assets/css/customerManage.css";
+@import "../../assets/css/customerManage.css";
 
-  .el-table__fixed-body-wrapper table {
+.el-table__fixed-body-wrapper table {
   padding-bottom: 8px !important;
-  }
+}
 
-  .el-table .xiaoji-row {
+.el-table .xiaoji-row {
   background: #ffff00;
-  }
+}
 
-  .el-table .sum-row {
+.el-table .sum-row {
   background: #00b0f0;
-  }
+}
 
-  .el-table .warning-col {
+.el-table .warning-col {
   background: red;
-  }
+}
 
-  .pointer {
+.pointer {
   cursor: pointer;
-  }
+}
 
-  .pointer:hover {
+.pointer:hover {
   color: #00b0f0;
-  }
+}
 </style>