气象预测 绑定数据

src/views/NewPages/forecast-system.vue

@@ -2,86 +2,91 @@
   <div class="forecast-system">
     <div class="action-bar mg-b-16">
       <div class="selections">
-        <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">麻黄山</div>
+        <!-- <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">麻黄山</div>
         <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">牛首山</div>
         <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">青山</div>
         <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 3 }">石板泉</div>
-        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 4 }">香山</div>
+        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 4 }">香山</div> -->
+        <div class="item" v-for="(item) of wpList" :key="item" 
+          @click="tabSelect(item)" :class="{ active: wpId == item.id }">{{item.name}}</div>
+        
       </div>
     </div>
     <div class="page-body">
       <el-row class="mg-b-16">
         <el-col :span="5" class="fc-info">
           <div class="fc-item">
-            <div class="title">牛首山风场</div>
+            <div class="title">{{wpName}}</div>
             <div class="tags">
               <div class="tag">
                 <i class="svg-icon svg-icon-gray-l svg-icon-lg">
-                  <svg-icon :svgid="'svg-duoyun'" />
+                  <svg-icon :svgid="'svg-' + weatherInfo.tqtp"/>
                 </i>
               </div>
               <div class="tag">
-                <div class="tag-title">实时风速</div>
-                <div class="tag-value">12.34<span class="unit">m/s</span></div>
+                <div class="tag-title">风速</div>
+                <div class="tag-value">{{weatherInfo.fs}}<span class="unit">m/s</span></div>
               </div>
               <div class="tag">
-                <div class="tag-title">预测风速</div>
-                <div class="tag-value">12.34<span class="unit">m/s</span></div>
+                <div class="tag-title">风向</div>
+                <div class="tag-value">{{weatherInfo.fx}}<span class="unit"></span></div>
               </div>
               <div class="tag">
-                <div class="tag-title">健康度（优）</div>
-                <div class="tag-value">12.34<span class="unit">台</span></div>
+                <div class="tag-title">清晰度</div>
+                <div class="tag-value">{{weatherInfo.qxd}}<span class="unit"></span></div>
               </div>
               <div class="tag">
-                <div class="tag-title">健康度（良）</div>
-                <div class="tag-value">12.34<span class="unit">台</span></div>
+                <div class="tag-title">温度</div>
+                <div class="tag-value">{{weatherInfo.wd}}<span class="unit">℃</span></div>
               </div>
               <div class="tag">
-                <div class="tag-title">健康度（差）</div>
-                <div class="tag-value">12.34<span class="unit">台</span></div>
+                <div class="tag-title">大气压强</div>
+                <div class="tag-value">{{weatherInfo.dqyl}}<span class="unit">hPa</span></div>
               </div>
               <div class="tag">
-                <div class="tag-title">健康度（差）</div>
-                <div class="tag-value">12.34<span class="unit">台</span></div>
+                <div class="tag-title">湿度</div>
+                <div class="tag-value">{{weatherInfo.sd}}<span class="unit">%</span></div>
               </div>
               <div class="tag">
-                <div class="tag-title">健康度（差）</div>
-                <div class="tag-value">12.34<span class="unit">台</span></div>
+                <div class="tag-title">经度</div>
+                <div class="tag-value">{{weatherInfo.jingdu}}<span class="unit"></span></div>
               </div>
               <div class="tag">
-                <div class="tag-title">健康度（差）</div>
-                <div class="tag-value">12.34<span class="unit">台</span></div>
+                <div class="tag-title">纬度</div>
+                <div class="tag-value">{{weatherInfo.weidu}}<span class="unit"></span></div>
               </div>
               <div class="tag">
-                <div class="tag-title">健康度（差）</div>
-                <div class="tag-value">12.34<span class="unit">台</span></div>
+                <div class="tag-title">云量</div>
+                <div class="tag-value">{{weatherInfo.yunliang}}<span class="unit"></span></div>
               </div>
               <div class="tag">
-                <div class="tag-title">健康度（差）</div>
-                <div class="tag-value">12.34<span class="unit">台</span></div>
+                <div class="tag-title">日出时间</div>
+                <div class="tag-value">{{weatherInfo.richushijian}}<span class="unit"></span></div>
               </div>
               <div class="tag">
-                <div class="tag-title">健康度（差）</div>
-                <div class="tag-value">12.34<span class="unit">台</span></div>
+                <div class="tag-title">日落时间</div>
+                <div class="tag-value">{{weatherInfo.riluoshijian}}<span class="unit"></span></div>
               </div>
             </div>
           </div>
         </el-col>
         <el-col :span="19">
           <panel :title="'损失电量分析'">
-            <multiple-bar-line-chart :height="'310px'" />
+            <multiple-bar-line-chart :height="'310px'" 
+              :lineData="chart1Line" :barData="chart1Bar"
+              :units="['功率（万kW）','电量（万kWh）']"/>
           </panel>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="12">
           <panel :title="'超短期风功率预测'">
-            <arrow-line-chart :height="'310px'" />
+            <arrow-line-chart :height="'310px'" :list="chart2List" :units="['功率（万kW）','风速（m/s）']"/>
           </panel>
         </el-col>
         <el-col :span="12">
           <panel :title="'短期风功率预测'">
-            <arrow-line-chart :height="'310px'" />
+            <arrow-line-chart :height="'310px'" :list="chart3List" :units="['功率（万kW）','风速（m/s）']"/>
           </panel>
         </el-col>
       </el-row>
@@ -99,13 +104,126 @@ export default {
   setup() {},
   data() {
     return {
-      tabIndex: 0,
+      wpList:[],
+      wpId:"MHS_FDC",
+      wpName:"麻黄山风电场",
+      weatherInfo:{},
+      chart1Bar:[],
+      chart1Line:[],
+      chart2List:[],
+      chart3List:[],
+      timer:null,
     };
   },
   methods: {
-    tabSelect(tab) {
-      this.tabIndex = tab;
+    tabSelect(item) {
+      this.wpId = item["id"];
+      this.wpName = item["name"];
+      {
+        this.getData();
+        this.getChart1();
+        this.getChart3();
+      }
+    },
+    async getWp() {
+      const res = await this.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAllAjax"
+      });
+      if(res) {
+        this.wpList = res.data.data.filter(ele=>{
+          return ele.id.indexOf("_FDC")>-1;
+        });
+      }
+    },
+    async getData() {
+      const res = await this.API.requestData({
+        method: "POST",
+        subUrl: "weather/weatherInfo",
+        data:{wpId:this.wpId}
+      });
+      if(res) {
+        this.weatherInfo = res.data.data;
+      }
+    },
+    async getChart1() {
+      const res = await this.API.requestData({
+        method: "POST",
+        subUrl: "weather/powerChart",
+        data:{wpId:this.wpId}
+      });
+      if(res) {
+        const fdlValue = {title:"电量",yAxisIndex:0,value:[]};
+        const glValue = {title:"功率",yAxisIndex:1,value:[]};
+        const fsValue = {name:"风速",unit:"m/s",data:[]};
+        res.data.data.forEach(e => {
+          if(fdlValue.value.length == 0){
+            fdlValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: 0});
+          }else{
+            fdlValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value1});
+          }
+          glValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value2});
+          fsValue.data.push(e.value3);
+        });
+        this.chart1Bar = [fdlValue,glValue];
+        this.chart1Line = fsValue;
+      }
     },
+    async getChart3() {
+      const res = await this.API.requestData({
+        method: "POST",
+        subUrl: "weather/weatherChart",
+        data:{wpId:this.wpId}
+      });
+      if(res) {
+        // 短期预测功率
+        {
+          const ycglValue = {title:"预测功率",yAxisIndex:0,value:[]};
+          const sjglValue = {title:"实际功率",yAxisIndex:0,value:[]};
+          const fsValue = {title:"风速",yAxisIndex:1,value:[]};
+          let hour = new Date().getHours();
+          res.data.data.forEach(e => {
+            if(ycglValue.value.length<=(24+hour)) {
+              ycglValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value7});
+              sjglValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value2});
+              fsValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value6});
+            }
+          });
+          this.chart3List = [ycglValue,sjglValue,fsValue];
+        }
+        // 超短期预测功率
+        const cdqGlValue = {title:"预测功率",yAxisIndex:0,value:[]};
+        const sjglValue = {title:"实际功率",yAxisIndex:0,value:[]};
+        const fsValue = {title:"风速",yAxisIndex:1,value:[]};
+        let hour = new Date().getHours();
+        res.data.data.forEach(e => {
+          if(cdqGlValue.value.length<=(4+hour)) {
+            cdqGlValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value4});
+            sjglValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value2});
+            fsValue.value.push({text: new Date(e.time).formatDate("hh:mm"),value: e.value6});
+          }
+        });
+        this.chart2List = [cdqGlValue,sjglValue,fsValue];
+      }
+    },
+  },
+  created() {
+    this.getWp();
+    let that = this;
+    that.$nextTick(() => {
+      that.getData();
+      that.getChart1()
+      that.getChart3();
+      that.timer = setInterval(() => {
+        that.getData();
+        that.getChart1()
+        that.getChart3();
+      }, 60000);
+    });
+  },
+  unmounted() {
+    clearInterval(this.timer);
+    this.timer = null;
   },
 };
 </script>