diff --git a/src/views/template/server.vue b/src/views/template/server.vue index dca7af11..6bf27727 100644 --- a/src/views/template/server.vue +++ b/src/views/template/server.vue @@ -1,130 +1,178 @@ @@ -139,24 +187,26 @@ }, data() { return { - group: [{ - label: "SQL Server", - icon: "el-icon-coin", - code: "1", + groupFilterText: '', + group: [ + { + label: "SQL Server", + icon: "el-icon-coin", + code: "1", - },{ - label: "Web Server", - icon: "el-icon-monitor", - code: "2", - },{ - label: "Api Server", - icon: "el-icon-monitor", - code: "3", - },{ - label: "Nginx Server", - icon: "el-icon-guide", - code: "4", - } + }, { + label: "Web Server", + icon: "el-icon-monitor", + code: "2", + }, { + label: "Api Server", + icon: "el-icon-monitor", + code: "3", + }, { + label: "Nginx Server", + icon: "el-icon-guide", + code: "4", + } ], colors: [{ color: '#409EFF', @@ -171,6 +221,34 @@ percentage: 100 } ], + event: [ + { + title: 'Disk 大于 90%', + type: '告警事件', + push: '短信', + time: '2021-10-09 21:25:19' + }, + { + title: 'Disk 大于 90%', + type: '致命事件', + push: '短信', + time: '2021-10-09 21:25:19' + } + ], + rule: [ + { + name: 'test_cpu', + title: '测试CPU报警', + type: 'CPU', + push: '短信' + }, + { + name: 'test_cpu', + title: '测试CPU报警', + type: 'CPU', + push: '短信' + } + ], option: { cpu: { tooltip: { @@ -386,7 +464,7 @@ opacity: 0.1, color: '#a74f01' }, - },{ + }, { name: '发送 Kbps', data: (function() { var res = []; @@ -401,15 +479,19 @@ symbol: 'none', lineStyle: { width: 1, - type:'dashed', + type: 'dashed', color: '#a74f01' } - } - ] + }] } } } }, + watch: { + groupFilterText(val) { + this.$refs.group.filter(val); + } + }, mounted() { setInterval(() => { this.option.cpu.series[0].data.shift() @@ -428,24 +510,42 @@ this.option.network.series[1].data.push(Math.round(Math.random() * 10)); this.option.network.xAxis.data.shift(); this.option.network.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, '')); - - - }, 1000) }, methods: { - tabClick(){ + //树过滤 + groupFilterNode(value, data){ + if (!value) return true; + return data.label.indexOf(value) !== -1; + }, + tabClick(tab) { this.$nextTick(() => { - // this.$refs.cpu.myChart && this.$refs.cpu.myChart.resize() - // this.$refs.memory.myChart && this.$refs.memory.myChart.resize() - // this.$refs.netword.myChart && this.$refs.netword.myChart.resize() + if(tab.props.label == 'CPU' && this.$refs.cpu.myChart){ + this.$refs.cpu.myChart.resize() + } + if(tab.props.label == 'Memory' && this.$refs.memory.myChart){ + this.$refs.memory.myChart.resize() + } + if(tab.props.label == 'Network' && this.$refs.network.myChart){ + this.$refs.network.myChart.resize() + } }) } } } + +