状态监视--天气

src/views/WindSite/pages/Home/Home.vue

@@ -4,7 +4,7 @@
       <btn-group-double :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select" />
     </div>
     <row>
-      <wind-site-weather />
+      <wind-site-weather :time="nowTime" :data="tqmap"/>
       <panel-3 class="wind-site-info">
         <row align="middle">
           <div class="info-item">
@@ -251,7 +251,10 @@ export default {
   data() {
     return {
       timmer: null, // 计时器
+      timmer2: null,
+      nowTime: "", // 时间
       fjmap: [], // 分机矩阵
+      tqmap: {}, // 天气数据
       glvos: {}, // 72小时功率曲线图
       wxssmap: {}, // 五项损失饼图数据
       jczbmap: {}, // 顶部基础数据
@@ -367,6 +370,7 @@ export default {
         },
         success(res) {
           if (res.data) {
+            that.tqmap = res.data.tqmap;
             let fjmap = [];
             let keys = ["value1", "value2", "value3", "value4", "value5", "value6", "value7", "value9"];
             let Powertrend = {
@@ -620,6 +624,9 @@ export default {
       that.timmer = setInterval(() => {
         that.requestData(false);
       }, that.$store.state.websocketTimeSec);
+      that.timmer2 = setInterval(() => {
+        that.nowTime = new Date().formatDate("hh:mm:ss");
+      }, 1000);
     });
   },
 
@@ -627,7 +634,9 @@ export default {
 
   unmounted() {
     clearInterval(this.timmer);
+    clearInterval(this.timmer2);
     this.timmer = null;
+    this.timmer2 = null;
   },
 };
 </script>

src/views/WindSite/pages/Home/wind-site-weather.vue

@@ -1,18 +1,18 @@
 // 天气分析
 <template>
   <div class="wind-site-weather">
-    <div class="title">风场 AM10:52 实况</div>
+    <div class="title">风场 {{ nowTime }} 实况</div>
     <div class="weather">
       <div class="weather-info">
         <span class="svg-icon">
           <svg-icon class="weather-icon" svgid="svg-duoyun" />
         </span>
         <div class="temperature-info">
-          <div class="temperature">{{ temperature }} °</div>
+          <div class="temperature">{{ sourceMap.wd }} °</div>
           <div class="other">
-            <div>{{ windDirection }}</div>
-            <span>{{ weather }}</span>
-            <span>{{ windSpeed }}</span>
+            <div>{{ sourceMap.tqmc }}</div>
+            <div>{{ sourceMap.fx }}</div>
+            <div>{{ sourceMap.fs }}</div>
           </div>
         </div>
       </div>
@@ -22,21 +22,21 @@
             <div class="svg-icon svg-icon-sm svg-icon-green">
               <svg-icon svgid="svg-能见度" />
             </div>
-            <div class="value">{{ visibility }}</div>
+            <div class="value">{{ sourceMap.qxd }}</div>
             <div class="text">能见度</div>
           </Col>
           <Col>
             <div class="svg-icon svg-icon-sm svg-icon-green">
               <svg-icon svgid="svg-湿度" />
             </div>
-            <div class="value">{{ humidity }}</div>
+            <div class="value">{{ sourceMap.sd }}</div>
             <div class="text">湿度</div>
           </Col>
           <Col>
             <div class="svg-icon svg-icon-sm svg-icon-green">
               <svg-icon svgid="svg-气压" />
             </div>
-            <div class="value">{{ pressure }}</div>
+            <div class="value">{{ sourceMap.dqyl }}kPa</div>
             <div class="text">气压</div>
           </Col>
           <Col>
@@ -66,9 +66,17 @@ import SvgIcon from "@/components/coms/icon/svg-icon.vue";
 
 export default {
   components: { Row, Col, SvgIcon },
-
+  props:{
+    time: String,
+    data:{
+      type:Object,
+      default:() => { }
+    }
+  },
   data() {
     return {
+      sourceMap: {},
+      nowTime: "",
       weather: "阴", // 气象法
       temperature: "11", // 温度
       windDirection: "北风", // 风向
@@ -80,6 +88,19 @@ export default {
       sunset: "18:50", // 日落
     };
   },
+  created(){},
+  mounted(){
+    this.sourceMap=this.data;
+  },
+
+  watch:{
+    data(res){
+      this.sourceMap=res;
+    },
+    time(value){
+      this.nowTime = value
+    }
+  }
 };
 </script>
 
@@ -111,15 +132,16 @@ export default {
 
       .temperature-info {
         display: flex;
+        flex-direction: column;
         .temperature {
           font-size: 2.778vh;
         }
         .other {
-          margin-left: -2.963vh;
-          margin-right: 1.481vh;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
           div {
-            text-align: right;
-            margin: 0.741vh 0;
+            margin-right: 1vh;
           }
 
           span {
@@ -139,7 +161,7 @@ export default {
 
       .text {
         color: @gray;
-        width: 5.5vh;
+        width: 5vh;
       }
 
       .value {