feat:运行监控模块

ZhangXianQiang

2024-03-18 a4cbbcb82bf6b5f09df1455f6436e4dd8047704a

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<template>
  <div class="detection-container">
    <div class="title-container">
      <span class="title">运行监控数据</span>
    </div>
    <div class="detection-content">
      <div class="water-item">
        <dv-water-level-pond :config="config1" style="width:100px;height:100px" />
        <div class="water-num water-text">6250/0</div>
        <div class="water-label water-text">接入率</div>
      </div>
      <div class="water-item">
        <dv-water-level-pond :config="config2" style="width:100px;height:100px" />
        <div class="water-num water-text">6236/6250</div>
        <div class="water-label water-text">GIS率</div>
      </div>
      <div class="water-item">
        <dv-water-level-pond :config="config3" style="width:100px;height:100px" />
        <div class="water-num water-text">5962/6250</div>
        <div class="water-label water-text">在线率</div>
      </div>
      <div class="water-item">
        <dv-water-level-pond :config="config4" style="width:100px;height:100px" />
        <div class="water-num water-text">5255/5962</div>
        <div class="water-label water-text">完好率</div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      config1: {
        data: [0],
        shape: 'round',
        waveHeight: 5
      },
      config2: {
        data: [99.77],
        shape: 'round',
        waveHeight: 5
      },
      config3: {
        data: [95.39],
        shape: 'round',
        waveHeight: 5
      },
      config4: {
        data: [88.14],
        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%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);
  padding: 20px 20px;
}
 
.water-item {
  font-size: 18px;
  color: #fff;
 
  .water-text {
    text-align: center;
  }
 
  .water-num {
    margin-top: 20px;
  }
 
  .water-label {
    font-size: 24px;
  }
}
</style>