| | |
| | | <template> |
| | | <!-- <div>--> |
| | | <div class="body"> |
| | | <div class="body" :style="{height:mainHeight+'px'}"> |
| | | <div style=""> |
| | | <div class="title"><i class="el-icon-s-fold" style="margin-right: 5px" />实时数据</div> |
| | | <div class="top"> |
| | |
| | | name: 'Index', |
| | | data() { |
| | | return { |
| | | mainHeight: 0, |
| | | tableHeight: 0, |
| | | barTopColor01: ['42,197,137', '187,236,218'], |
| | | barTopColor02: ['248,216,76', '255,250,238'], |
| | | barTopColor03: ['42,197,137', '187,236,218'], |
| | |
| | | created() { |
| | | }, |
| | | mounted() { |
| | | window.addEventListener('resize', this.getHeight) |
| | | this.getHeight() |
| | | this.handleEcharts() |
| | | }, |
| | | methods: { |
| | | // 获取页面高度 |
| | | getHeight() { |
| | | this.$nextTick(() => { |
| | | this.mainHeight = window.innerHeight - 200 |
| | | this.tableHeight = this.mainHeight - 100 |
| | | }) |
| | | }, |
| | | handleEcharts() { |
| | | this.getTopData() |
| | | this.getBar01() |
| | |
| | | .images { |
| | | width: 69px; |
| | | height: 69px; |
| | | margin: 30px; |
| | | margin: 30px calc((10% - 20px)); |
| | | } |
| | | |
| | | .images1 { |
| | | background: url("../../assets/images/dlyy.png") no-repeat; |
| | | background: url("../../assets/images/msg_app.png") no-repeat; |
| | | } |
| | | |
| | | .images2 { |
| | | background: url("../../assets/images/hyyyy.png") no-repeat; |
| | | background: url("../../assets/images/msg_huoyue.png") no-repeat; |
| | | } |
| | | |
| | | .images3 { |
| | | background: url("../../assets/images/webhy.png") no-repeat; |
| | | background: url("../../assets/images/msg_web.png") no-repeat; |
| | | } |
| | | |
| | | .images4 { |
| | | background: url("../../assets/images/apphy.png") no-repeat; |
| | | background: url("../../assets/images/msg_zhuceyonghu.png") no-repeat; |
| | | } |
| | | |
| | | .content { |