diff --git a/src/views/components/rankList/index.vue b/src/views/components/rankList/index.vue
index f53a923..256f24d 100644
--- a/src/views/components/rankList/index.vue
+++ b/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 });
}
}
}
diff --git a/src/views/dashboard/PanelGroup.vue b/src/views/dashboard/PanelGroup.vue
index a27f562..bf3cac3 100644
--- a/src/views/dashboard/PanelGroup.vue
+++ b/src/views/dashboard/PanelGroup.vue
@@ -28,8 +28,8 @@
@@ -53,7 +53,7 @@
-
+
@@ -61,6 +61,21 @@
+
+
+
自动刷新
+
+
+ {{ refreshTimeModel }}
+
+ {{ label }}
+
+
+
+
@@ -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;
+ }
+ }
}