更新代码

src/views/dashboard/PanelGroup.vue

@@ -2,22 +2,25 @@
   <div class="wrapper">
     <div class="header">
       <el-row :gutter="16" class="panel-group">
-        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col" v-for="(item, index) in layoutRow" :key="index">
+        <el-col v-for="(item, index) in layoutRow" :key="index" :lg="6" :sm="12" :xs="12" class="card-panel-col">
           <div class="content">
             <div class="data-box flow-hidden">
               <div class="data-info fl_l">
                 <div class="title">{{ item.label() }}</div>
                 <div class="count">
-                  <count-to :start-val="0" :end-val="item.model.count" :duration="2600" class="card-panel-num" />
+                  <count-to :duration="2600" :end-val="item.model.count" :start-val="0" class="card-panel-num"/>
                 </div>
               </div>
               <div class="icon fl_r">
                 <img :src="item.icon" alt="">
               </div>
             </div>
-            <div class="compare" v-if="item.model.trendDirection >= 0">
+            <div v-if="item.model.trendDirection >= 0" class="compare">
               和昨日相比
-              <img class="trend" :src="`${item.model.trendDirection === 0 ? require('../../assets/icons/trend_up.png') : require('../../assets/icons/trend_down.png') }`" alt="">
+              <img :src="`${item.model.trendDirection === 0 ? require('../../assets/icons/trend_up.png') : require('../../assets/icons/trend_down.png') }`"
+                   alt=""
+                   class="trend"
+              >
               <span :class="['num', item.model.trendDirection === 0 ? 'up' : 'down' ]">{{ item.model.trendNum }}%</span>
             </div>
           </div>
@@ -28,36 +31,49 @@
     <div class="chart-content">
       <line-chart/>
       <div class="select-time">
-        <el-select v-model="chartTime" @change="handleChartTimeChange">
+        <el-date-picker
-          <el-option v-for="item in chartSelect" :label="item.label" :key="item.key" :value="item.key"></el-option>
+          v-model="chartTime"
-        </el-select>
+          :picker-options="pickerOptions"
+          align="right"
+          value-format="yyyy-MM-dd"
+          end-placeholder="结束日期"
+          @change="handleDatePickerChange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          type="daterange"
+          unlink-panels
+        >
+        </el-date-picker>
+        <!--        <el-select v-model="chartTime" @change="handleChartTimeChange">
+                  <el-option v-for="item in chartSelect" :label="item.label" :key="item.key" :value="item.key"></el-option>
+                </el-select>-->
       </div>
     </div>
 
     <div class="rank-info">
       <el-row :gutter="16" class="panel-group">
-        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+        <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
           <RankList title="充值排行榜">
             <template :scope="scope">
-              <count-to prefix='￥' :start-val="0" :end-val="900" :duration="2600" class="card-panel-num" />
+              <count-to :duration="2600" :end-val="900" :start-val="0" class="card-panel-num" prefix="￥"/>
             </template>
           </RankList>
         </el-col>
 
-        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+        <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
           <RankList title="提现排行榜">
             <template :scope="scope">
-              <count-to prefix='￥' :start-val="0" :end-val="900" :duration="2600" class="card-panel-num" />
+              <count-to :duration="2600" :end-val="900" :start-val="0" class="card-panel-num" prefix="￥"/>
             </template>
           </RankList>
         </el-col>
 
-        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+        <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
-          <RankList @switch-change="" title="女神收入榜" :operation="operation" />
+          <RankList :operation="operation" title="女神收入榜" @switch-change=""/>
         </el-col>
 
-        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+        <el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
-          <RankList title="用户邀请榜" :operation="operation" />
+          <RankList :operation="operation" title="用户邀请榜"/>
         </el-col>
       </el-row>
     </div>
@@ -70,8 +86,10 @@
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item
             v-for="({ label, key }) in refreshTimeSelect"
+            :key="key"
             :command="{ label, key }"
-            :key="key">{{ label }}</el-dropdown-item>
+          >{{ label }}
+          </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
@@ -80,30 +98,58 @@
 </template>
 
 <script>
-import CountTo from 'vue-count-to';
+import CountTo from 'vue-count-to'
-import RankList from '@/views/components/rankList';
+import RankList from '@/views/components/rankList'
-import LineChart from '../dashboard/LineChart';
+import LineChart from '../dashboard/LineChart'
 
 const chartSelect = [
   { label: '最近一周', key: '1' },
   { label: '最近一个月', key: '2' },
-  { label: '最近三个月', key: '3' },
+  { label: '最近三个月', key: '3' }
-];
+]
 
 const refreshTimeSelect = [
   { label: '10s', key: '10' },
   { label: '30s', key: '30' },
-  { label: '60s', key: '60' },
+  { label: '60s', key: '60' }
 ]
 
 const operation = [
   { label: '总', prop: '' },
   { label: '月', prop: '' },
   { label: '周', prop: '' },
-  { label: '日', prop: '' },
+  { label: '日', prop: '' }
 ]
 
-export default  {
+const 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])
+    }
+  }]
+}
+
+export default {
   components: {
     CountTo,
     RankList,
@@ -139,24 +185,37 @@ export default  {
       chartTime: '1',
       refreshTimeSelect,
       refreshTimeModel: '30s',
-      autoRefreshSwitch: true
+      autoRefreshSwitch: true,
+      pickerOptions,
     }
   },
   created() {
     this.layoutRow = [
-      { label: ()=> '今日登录', icon: require('../../assets/icons/img.png'), model: this.loginModel },
+      { label: () => '今日登录', icon: require('../../assets/icons/img.png'), model: this.loginModel },
-      { label: ()=> '主播数', icon: require('../../assets/icons/img_1.png'), model: this.topUpModel },
+      { label: () => '主播数', icon: require('../../assets/icons/img_1.png'), model: this.topUpModel },
-      { label: ()=> `今日充值(${this.withdrawDepositModel.money})`, icon: require('../../assets/icons/img_2.png'), model: this.withdrawDepositModel },
+      {
-      { label: ()=> `今日提现(${this.anchorModel.money})`, icon: require('../../assets/icons/img_3.png'), model: this.anchorModel }
+        label: () => `今日充值(${this.withdrawDepositModel.money})`,
-    ];
+        icon: require('../../assets/icons/img_2.png'),
-    this.getTodayStatistics();
+        model: this.withdrawDepositModel
+      },
+      {
+        label: () => `今日提现(${this.anchorModel.money})`,
+        icon: require('../../assets/icons/img_3.png'),
+        model: this.anchorModel
+      }
+    ]
+    this.getTodayStatistics()
   },
   methods: {
+    handleDatePickerChange(value) {
+      console.log('----value:', value);
+    },
+
     handleChartTimeChange(val) {
       // todo
     },
     handleDropdownClick({ label, key }) {
-      this.refreshTimeModel = label;
+      this.refreshTimeModel = label
     },
     getTodayStatistics() {
       // todo fetch
@@ -180,162 +239,189 @@ export default  {
         todayWithdrawAmount: 500,
         todayWithdrawNum: 1,
         todayWithdrawAmountDiffLast: 5.9
-      };
+      }
-      this.loginModel.count = todayLoginNum;
+      this.loginModel.count = todayLoginNum
-      this.loginModel.trendDirection = 1; // 增加还是减少
+      this.loginModel.trendDirection = 1 // 增加还是减少
-      this.loginModel.trendNum = todayLoginDiffLast;
+      this.loginModel.trendNum = todayLoginDiffLast
 
-      this.topUpModel.count = anchorNum; // 主播人数
+      this.topUpModel.count = anchorNum // 主播人数
 
-      this.withdrawDepositModel.count = todayRechargeAmountNum; // 充值金额
+      this.withdrawDepositModel.count = todayRechargeAmountNum // 充值金额
-      this.withdrawDepositModel.money = todayRechargeNum;
+      this.withdrawDepositModel.money = todayRechargeNum
-      this.withdrawDepositModel.trendNum = todayRechargeAmountDiffLast; // 与昨日相比
+      this.withdrawDepositModel.trendNum = todayRechargeAmountDiffLast // 与昨日相比
 
-      this.anchorModel.count = todayWithdrawAmount;
+      this.anchorModel.count = todayWithdrawAmount
-      this.anchorModel.money = todayWithdrawNum;
+      this.anchorModel.money = todayWithdrawNum
-      this.anchorModel.trendNum = todayWithdrawAmountDiffLast;
+      this.anchorModel.trendNum = todayWithdrawAmountDiffLast
     }
   }
 }
 
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
-  .fl_l {
+.fl_l {
-    float: left;
+  float: left;
-  }
+}
-  .fl_r {
+
-    float: right;
+.fl_r {
-  }
+  float: right;
-  .flow-hidden {
+}
-    overflow: hidden;
+
-  }
+.flow-hidden {
-  .wrapper {
+  overflow: hidden;
-    .header {
+}
-      margin-bottom: 16px;
+
-      .card-panel-num {
+.wrapper {
-        font-size: 28px;
+  .header {
-        font-weight: bold;
+    margin-bottom: 16px;
-        color: #202224;
+
-      }
+    .card-panel-num {
-      .content {
+      font-size: 28px;
-        background: #fff;
+      font-weight: bold;
-        height: 127px;
+      color: #202224;
-        padding: 16px;
-        border-radius: 14px;
-        box-sizing: border-box;
-        margin-bottom: 8px;
-        .data-info {
-          .title {
-            font-size: 16px;
-            color: #202224;
-            margin-bottom: 8px;
-          }
-          .count {
-            line-height: 38px;
-          }
-        }
-        .icon {
-          width: 60px;
-          height: 60px;
-          img {
-            width: 100%;
-            height: 100%;
-          }
-        }
-        .compare {
-          height: 20px;
-          line-height: 20px;
-          font-size: 14px;
-          color: #858585;
-          .trend {
-            height: 18px;
-            width: 18px;
-            margin-left: 8px;
-            margin-right: 2px;
-            vertical-align: middle;
-          }
-          .num {
-            &.down {
-              color: #F93C65;
-            }
-            &.up {
-              color: #00B69B;
-            }
-          }
-        }
-      }
     }
 
-    .chart-content {
+    .content {
-      position: relative;
-      border-radius: 14px;
       background: #fff;
+      height: 127px;
       padding: 16px;
-      margin-bottom: 16px;
+      border-radius: 14px;
-      .select-time {
-        position: absolute;
-        right: 16px;
-        top: 16px;
-      }
-    }
-
-    .rank-info {
-      margin-bottom: 16px;
-      .card-panel-col {
-        border-radius: 14px;
-        margin-bottom: 16px;
-      }
-    }
-
-    .auto-refresh {
-      position: fixed;
-      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-      bottom: 8px;
-      right: 8px;
-      width: 130px;
-      padding: 4px;
       box-sizing: border-box;
-      display: flex;
+      margin-bottom: 8px;
-      height: 24px;
+
-      border-radius: 12px;
+      .data-info {
-      background: #fff;
+        .title {
-      color: #767D85;
+          font-size: 16px;
-      text-align: center;
+          color: #202224;
-      font-size: 12px;
+          margin-bottom: 8px;
-    }
+        }
-  }
+
-  ::v-deep .el-switch {
+        .count {
-    height: 14px!important;
+          line-height: 38px;
-    margin-top: 1px;
+        }
-    margin-left: 4px;
+      }
-  }
+
-  ::v-deep .el-switch__core {
+      .icon {
-    width: 28px!important;
+        width: 60px;
-    height: 14px!important;
+        height: 60px;
-    &::after {
+
-      width: 10px;
+        img {
-      height: 10px;
+          width: 100%;
-    }
+          height: 100%;
-  }
+        }
-  ::v-deep .el-switch.is-checked .el-switch__core {
+      }
-    border-color: #3073C1!important;
+
-    background-color: #3073C1!important;
+      .compare {
-    &::after {
+        height: 20px;
-      margin-left: -12px;
+        line-height: 20px;
-    }
+        font-size: 14px;
-  }
+        color: #858585;
-  ::v-deep .el-dropdown {
+
-    width: 37px!important;
+        .trend {
-    .dropdown {
+          height: 18px;
-      margin-left: 1px;
+          width: 18px;
-      font-size: 12px;
+          margin-left: 8px;
-      color: #767D85;
+          margin-right: 2px;
-      cursor: pointer;
+          vertical-align: middle;
-      i {
+        }
-        font-size: 10px;
+
-        margin-left: 2px;
+        .num {
+          &.down {
+            color: #F93C65;
+          }
+
+          &.up {
+            color: #00B69B;
+          }
+        }
       }
     }
   }
+
+  .chart-content {
+    position: relative;
+    border-radius: 14px;
+    background: #fff;
+    padding: 16px;
+    margin-bottom: 16px;
+
+    .select-time {
+      width: 250px;
+      position: absolute;
+      right: 16px;
+      top: 16px;
+      .el-date-editor {
+        width: 100%;
+      }
+    }
+  }
+
+  .rank-info {
+    margin-bottom: 16px;
+
+    .card-panel-col {
+      border-radius: 14px;
+      margin-bottom: 16px;
+    }
+  }
+
+  .auto-refresh {
+    position: fixed;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    bottom: 8px;
+    right: 8px;
+    width: 130px;
+    padding: 4px;
+    box-sizing: border-box;
+    display: flex;
+    height: 24px;
+    border-radius: 12px;
+    background: #fff;
+    color: #767D85;
+    text-align: center;
+    font-size: 12px;
+  }
+}
+
+::v-deep .el-switch {
+  height: 14px !important;
+  margin-top: 1px;
+  margin-left: 4px;
+}
+
+::v-deep .el-switch__core {
+  width: 28px !important;
+  height: 14px !important;
+
+  &::after {
+    width: 10px;
+    height: 10px;
+  }
+}
+
+::v-deep .el-switch.is-checked .el-switch__core {
+  border-color: #3073C1 !important;
+  background-color: #3073C1 !important;
+
+  &::after {
+    margin-left: -12px;
+  }
+}
+
+::v-deep .el-dropdown {
+  width: 37px !important;
+
+  .dropdown {
+    margin-left: 1px;
+    font-size: 12px;
+    color: #767D85;
+    cursor: pointer;
+
+    i {
+      font-size: 10px;
+      margin-left: 2px;
+    }
+  }
+}
 </style>