| | |
| | | <template> |
| | | <div class="detection-container"> |
| | | <div class="title-container"> |
| | | <span class="title">运行监控数据</span> |
| | | </div> |
| | | <wrapper-title :title="'运行监控数据'" :path="'/dataManage'"></wrapper-title> |
| | | |
| | | <div class="detection-content"> |
| | | <div class="water-item"> |
| | | <dv-water-level-pond :config="config1" style="width:100px;height:100px" /> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import WrapperTitle from '../wrapper-title/index'; |
| | | export default { |
| | | components: { |
| | | WrapperTitle |
| | | }, |
| | | data() { |
| | | return { |
| | | config1: { |
| | |
| | | waveHeight: 5 |
| | | }, |
| | | config2: { |
| | | data: [99.77], |
| | | data: [70.77], |
| | | shape: 'round', |
| | | waveHeight: 5 |
| | | }, |
| | | config3: { |
| | | data: [95.39], |
| | | data: [60.39], |
| | | shape: 'round', |
| | | waveHeight: 5 |
| | | }, |
| | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .title-container { |
| | | background-image: url("../../../../assets/images/screen/title_bg.png"); |
| | | background-size: 231px 100%; |
| | | background-repeat: no-repeat; |
| | | height: 38px; |
| | | width: 100%; |
| | | position: relative; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 10px; |
| | | |
| | | .title { |
| | | margin-left: 20px; |
| | | margin-top: -2px; |
| | | color: #fff; |
| | | letter-spacing: 2px; |
| | | font-size: 20px; |
| | | font-style: italic; |
| | | } |
| | | } |
| | | |
| | | .detection-content { |
| | | width: 100%; |
| | |
| | | } |
| | | |
| | | .water-item { |
| | | font-size: 18px; |
| | | font-size: 16px; |
| | | color: #fff; |
| | | |
| | | .water-text { |
| | |
| | | } |
| | | |
| | | .water-label { |
| | | font-size: 24px; |
| | | font-size: 20px; |
| | | } |
| | | } |
| | | </style> |