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 @@ + +
+ 自动刷新 + + + + + {{ 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; + } + } }