修改首页

src/views/index.vue

@@ -97,12 +97,28 @@
           </ul>
           <div style="width: 100%;margin-top: 20px;">
             <div style="float: right;margin-right: 20px">
-              <el-button type="primary" :plain="choicePlain?false:true" size="mini" style="margin-left: 0;border-top-right-radius: 0;border-bottom-right-radius: 0" @click="choiceClick(0)">今日</el-button>
-              <el-button type="primary" :plain="!choicePlain?false:true" size="mini" style="margin-left: 0;border-top-left-radius: 0;border-bottom-left-radius: 0" @click="choiceClick(1)">本月</el-button>
+              <el-button type="primary" :plain="choicePlain?false:true" size="mini" style="float: left;margin-left: 0;border-top-right-radius: 0;border-bottom-right-radius: 0" @click="choiceClick(0)">今日</el-button>
+              <el-button type="primary" :plain="!choicePlain?false:true" size="mini" style="float: left;margin-left: 0;border-top-left-radius: 0;border-bottom-left-radius: 0" @click="choiceClick(1)">本月</el-button>
+              <span style="display: block;float: left;padding-top: 0px;margin-left: 5px">
+                <el-date-picker
+                  v-model="choiceValue"
+                  type="daterange"
+                  align="right"
+                  unlink-panels
+                  size="mini"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  :default-time="['00:00:00', '23:59:59']"
+                  :picker-options="pickerOptions">
+              </el-date-picker>
+              </span>
+              <el-button type="primary" icon="el-icon-search" circle @click="choiceClick(2)" size="mini" style="margin-left: 10px;"></el-button>
             </div>
           </div>
-          <div style="width: 100%;background-color: #FFFFFF;display:flex;justify-content: space-between;">
-            <div v-for="item in statisList" style="width: 30vh;height: 15vh;background-color: #f4f8ff;border-radius: 10px;margin: 20px auto">
+          <div style="width: 100%;background-color: #FFFFFF;display:flex;justify-content: space-between;flex-wrap: wrap">
+            <div v-for="item in statisList" style="width: 40%;height: 18vh;background-color: #f4f8ff;border-radius: 10px;margin: 20px auto;">
               <div style="height: 100%;display: table;float: left;width: 10vh;">
                 <div style="display: table-cell;vertical-align: middle;text-align: center">
                   <i class="el-icon-download" style="font-size: 5vh;color: #419eff" v-if="item.billType === 'RK' "></i>
@@ -112,8 +128,16 @@
                   <div style="text-align: center;font-weight:bold;color: #419eff;font-size: 2vh;">{{item.billTypeName}}</div>
                 </div>
               </div>
-              <div style="height: 100%;color:#909399;display: table;">
+              <div style="height: 100%;color:#909399;display: table;margin-left: 10px;">
                 <div style="display: table-cell;vertical-align: middle;">
+                  <div>数量</div>
+                  <div><span style="letter-spacing: 13px">全</span>部：<span style="font-size: 2.4vh;font-weight: bold">{{item.allNum}}</span></div>
+                  <div><span style="letter-spacing: 13px">入</span>账：<span style="font-size: 2.4vh;font-weight: bold">{{item.entryNum}}</span></div>
+                  <div>未入账：<span style="font-size: 2.4vh;font-weight: bold">{{item.notNum}}</span></div>
+                </div>
+                <div style="width: 2px;height: 60%;background-color: #419eff82;margin: 3.2vh 1vh"></div>
+                <div style="display: table-cell;vertical-align: middle;">
+                  <div>金额</div>
                   <div><span style="letter-spacing: 13px">全</span>部：<span style="font-size: 2.4vh;font-weight: bold">{{item.allMoney}}</span>元</div>
                   <div><span style="letter-spacing: 13px">入</span>账：<span style="font-size: 2.4vh;font-weight: bold">{{item.entryMoney}}</span>元</div>
                   <div>未入账：<span style="font-size: 2.4vh;font-weight: bold">{{item.notMoney}}</span>元</div>
@@ -129,7 +153,7 @@
         <div style="width: 30%">
           <div style="width: 100%">
             <div style="display: flex">
-              <div id="box" style="width: 100%; height: 250px"></div>
+              <div id="box" style="width: 100%; height: 450px"></div>
               <el-select
                 v-model="select"
                 slot="prepend"
@@ -316,6 +340,34 @@ export default {
       version: '3.2.1',
       select: '',
       text: '',
+      choiceValue:[],
+      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]);
+          }
+        }]
+      },
       dialogVisible: false,
       choicePlain:true,
       tableData: [],
@@ -407,13 +459,14 @@ export default {
       let timeStar=Date.parse(monthStartDate)/1000;//s
       let timeEnd=Date.parse(monthEndDate)/1000;//s
       let data = []
-      this.choicePlain = !this.choicePlain
       if(type === 0){
         this.choicePlain = true
         data = [now.toLocaleDateString().replace(/\//g, '-')+ ' 00:00:00',now.toLocaleDateString().replace(/\//g, '-')+' 23:59:59']
       }else if (type === 1 || type === 3) {
         this.choicePlain = false
         data =[this.timestampToTime(timeStar).slice(0,10)+ ' 00:00:00',this.timestampToTime(timeEnd).slice(0,10)+' 23:59:59']
+      }else if(type === 2){
+        data = this.choiceValue
       }
       statistics({timeInterval:data}).then(res=>{
         this.statisList = res.data