30min

src/components2/equipmentStatus/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-col :span="24" class="equipmentStatus modular" style="padding:10px 20px 0;">
+  <el-col :span="24" class="equipmentStatus modular">
     <div class="title title2" style="margin-left:0">设备状态</div>
     <!-- <div class="selectOpition">
         <el-select  v-model="select" placeholder="请选择设备类型" class="select1">

src/components2/weather/index.vue

@@ -1,10 +1,112 @@
+ wangtao / DX-LargeScreen
+
+
+index.vue 2.1 KB
+
+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
 <template>
   <el-row class="weather modular" :gutter="40" >
     <el-col :span="8" class="rowN">
       <el-image :src="weather1" fit="scale-down" />
       <div class="name">温度</div>
       <div class="num">
-        27
+        {{data.temperature}}
         <div class="unit">℃</div>
       </div>
     </el-col>
@@ -12,7 +114,7 @@
       <el-image :src="weather2" fit="scale-down" />
       <div class="name">湿度</div>
       <div class="num">
-        60
+        {{data.sd}}
         <div class="unit">%RH</div>
       </div>
     </el-col>
@@ -20,13 +122,14 @@
       <el-image :src="weather3" fit="scale-down" />
       <div class="name">PM2.5</div>
       <div class="num">
-        3
+        {{data.aqiDetail.pm2_5}}
         <div class="unit">ug/m3</div>
       </div>
     </el-col>
   </el-row>
 </template>
 <script>
+import axios from 'axios'
 import weather1 from "@/assets/images2/温度.png";
 import weather2 from "@/assets/images2/湿度.png";
 import weather3 from "@/assets/images2/pm2.5.png";
@@ -37,8 +140,30 @@ export default {
       weather1: weather1,
       weather2: weather2,
       weather3: weather3,
+      data:{
+        aqiDetail:{}
+      }
     };
   },
+  created(){
+    this.initData()
+    setInterval(()=>{
+      this.initData()
+    },1000*60*30)
+  },
+  methods: {
+    //初始化数据
+    initData() {
+      axios({
+            method: 'get',
+            url: 'https://smartpark.caih.com/dxapi/aliWeather?area=南宁',
+            timeout: 10000,
+        }).then(res =>{
+            this.data = res.data.showapi_res_body.now
+        }).catch(err =>{
+        })
+    },
+  }
 };
 </script>
 <style lang="scss" scoped>