更新代码

src/views/components/rankList/index.vue

@@ -50,6 +50,10 @@ export default {
     operation: {
       type: Array,
       default: ()=> ([{ label: '总', prop: '' }, { label: '日', prop: '' }])
+    },
+    url: {
+      type: String,
+      default: ''
     }
   },
 
@@ -62,6 +66,7 @@ export default {
     handleSwitch(label, prop, index) {
       console.log(label, prop)
       this.activeIndex = index;
+      this.$emit('switch-change', { label, prop, index });
     }
   }
 }

src/views/dashboard/PanelGroup.vue

@@ -28,8 +28,8 @@
     <div class="chart-content">
       <line-chart/>
       <div class="select-time">
-        <el-select v-model="chartTime">
+        <el-select v-model="chartTime" @change="handleChartTimeChange">
-          <el-option v-for="item in chartSelect" :label="item.label" :key="item.key" :value="item.value"></el-option>
+          <el-option v-for="item in chartSelect" :label="item.label" :key="item.key" :value="item.key"></el-option>
         </el-select>
       </div>
     </div>
@@ -53,7 +53,7 @@
         </el-col>
 
         <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-          <RankList title="女神收入榜" :operation="operation" />
+          <RankList @switch-change="" title="女神收入榜" :operation="operation" />
         </el-col>
 
         <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
@@ -61,6 +61,21 @@
         </el-col>
       </el-row>
     </div>
+
+    <div class="auto-refresh">
+      <span>自动刷新</span>
+      <el-switch v-model="autoRefreshSwitch"></el-switch>
+      <el-dropdown @command="handleDropdownClick">
+        <div class="dropdown">{{ refreshTimeModel }}<i class="el-icon-arrow-down el-icon--right"></i></div>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item
+            v-for="({ label, key }) in refreshTimeSelect"
+            :command="{ label, key }"
+            :key="key">{{ label }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+
   </div>
 </template>
 
@@ -73,6 +88,12 @@ const chartSelect = [
   { label: '最近一周', key: '1' },
   { label: '最近一个月', key: '2' },
   { label: '最近三个月', key: '3' },
+];
+
+const refreshTimeSelect = [
+  { label: '10s', key: '10' },
+  { label: '30s', key: '30' },
+  { label: '60s', key: '60' },
 ]
 
 const operation = [
@@ -115,7 +136,10 @@ export default  {
         trendNum: 8.5
       },
       chartSelect,
-      chartTime: '1'
+      chartTime: '1',
+      refreshTimeSelect,
+      refreshTimeModel: '30s',
+      autoRefreshSwitch: true
     }
   },
   created() {
@@ -127,7 +151,12 @@ export default  {
     ];
   },
   methods: {
-
+    handleChartTimeChange(val) {
+      // todo
+    },
+    handleDropdownClick({ label, key }) {
+      this.refreshTimeModel = label;
+    }
   }
 }
 
@@ -220,5 +249,55 @@ export default  {
         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>