Commit e19156211ff07d024cbc3adc92a4ca53dc0ab5a9

Authored by liuqimichale
1 parent 350097e4

调取接口

src/components/VEquipment.vue
1 1 <template>
2 2 <div class="theme-wrap">
3 3 <card-title> <span>设备监控消息</span></card-title>
  4 + {{equipment.PDA}}/{{equipment.PDATotal}}
4 5 <ul class="theme-body" style="padding: 10px 20px 20px 0;">
5 6 <li class="equipment-section">
6 7 <div class="normal-status front">
7   - <p class="text-blue">{{equipment.pdaper}}%</p>
  8 + <div class="text-blue">{{equipment.pdaper}}%</div>
8 9 <p>PDA在线率</p>
9 10 </div>
10 11 <div class="rotate-status back">
11   - <p class="text-blue">{{equipment.PDA}}/{{equipment.PDATotal}}</p>
  12 + <div class="text-blue">{{equipment.PDA}}/{{equipment.PDATotal}}</div>
12 13 <p>PDA/PDA在线</p>
13 14 </div>
14 15 </li>
15 16 <li class="equipment-section">
16 17 <div class="normal-status front">
17   - <p class="text-blue">{{equipment.berthper}}%</p>
  18 + <div class="text-blue">{{equipment.berthper}}%</div>
18 19 <p>地磁在线率</p>
19 20 </div>
20 21 <div class="rotate-status back">
... ... @@ -24,11 +25,11 @@
24 25 </li>
25 26 <li class="equipment-section">
26 27 <div class="normal-status front">
27   - <p class="text-orange">23.4%</p>
  28 + <div class="text-orange">23.4%</div>
28 29 <p>道闸在线率</p>
29 30 </div>
30 31 <div class="rotate-status back">
31   - <p class="text-orange">{{equipment.daozha}}/{{equipment.daozhaTotal}}</p>
  32 + <div class="text-orange">{{equipment.daozha}}/{{equipment.daozhaTotal}}</div>
32 33 <p>道闸/道闸在线</p>
33 34 </div>
34 35 </li>
... ... @@ -57,7 +58,7 @@ export default {
57 58 props:['equipment'],
58 59 data() {
59 60 return {
60   -
  61 + equipvalue:''
61 62 }
62 63 },
63 64 mounted(){
... ... @@ -65,7 +66,8 @@ export default {
65 66 watch:{
66 67 equipment:{//深度监听,可监听到对象、数组的变化
67 68 handler(val){
68   - console.log(val)
  69 + this.equipvalue = val
  70 + console.log(val.PDA)
69 71 },
70 72 deep:true
71 73 }
... ... @@ -99,7 +101,7 @@ export default {
99 101 transform-style:preserve-3d;
100 102 /*transition:1s;*/
101 103 animation:myfirst 6s linear infinite;
102   - div{
  104 + >div{
103 105 width: 95%;
104 106 height: 95%;
105 107 position: absolute;
... ... @@ -108,7 +110,7 @@ export default {
108 110 padding: 15px 0 10px 0;
109 111 text-align: center;
110 112  
111   - p{
  113 + p,div{
112 114 height: 50%;
113 115 display: flex;
114 116 align-items: center;
... ...
src/view/VHome.vue
... ... @@ -86,6 +86,7 @@ export default {
86 86 berthper:100,
87 87 daozha:150,
88 88 daozhaTotal:1300,
  89 + daozhaper:100,
89 90 ydp:150,
90 91 ydpTotal:300
91 92 },
... ... @@ -159,26 +160,26 @@ export default {
159 160 orgIds: this.GLOBAL.orignId
160 161 }).then((response)=>{
161 162 let data = response.data.data
162   - console.log(data[0].onNum)
163   - // if(data[0].onNum == 0){
164   - // var PDAper = 0
165   - // }else{
166   - // var PDAper = ((data[0].onNum/data[0].num)*100).toFixed(2)
167   - // }
168   - //
169   - // if(data[1].onNum == 0){
170   - // var berthper = 0
171   - // }else{
172   - // var berthper = ((data[1].onNum/data[1].num)*100).toFixed(2)
173   - // }
  163 + console.log(data)
  164 + if(data[0].onNum == 0){
  165 + var PDAper = 0
  166 + }else{
  167 + var PDAper = ((data[0].onNum/data[0].num)*100).toFixed(2)
  168 + }
  169 +
  170 + if(data[1].onNum == 0){
  171 + var berthper = 0
  172 + }else{
  173 + var berthper = ((data[1].onNum/data[1].num)*100).toFixed(2)
  174 + }
174 175  
175 176 this.$set(this.equipment,'PDA',data[0].onNum)
176   - //this.$set(this.equipment,'PDATotal',data[0].num)
177   - //this.$set(this.equipment,'pdaper',PDAper)
  177 + this.$set(this.equipment,'PDATotal',data[0].num)
  178 + this.$set(this.equipment,'pdaper',PDAper)
178 179  
179   - // this.$set(this.equipment,'berth',data[1].onNum)
180   - // this.$set(this.equipment,'berthTotal',data[1].num)
181   - // this.$set(this.equipment,'berthper',berthper)
  180 + this.$set(this.equipment,'berth',data[1].onNum)
  181 + this.$set(this.equipment,'berthTotal',data[1].num)
  182 + this.$set(this.equipment,'berthper',berthper)
182 183 // this.equipment = {
183 184 // PDA:data[0].onNum,
184 185 // PDATotal:data[0].num,
... ...