添加风资源风向分析

src/router/index.js

@@ -773,6 +773,12 @@ const routes = [{
         path: "/alarmCenter/customStatistics",
         name: "customStatistics",
         component: () => import("../views/alarmCenter/customStatistics.vue")
+    },  
+    // 风向图
+    {
+        path: "/windAnalysis/fxzstmain",
+        name: "fxzstmain",
+        component: () => import("../views/windAnalysis/fxzstmain.vue")
     },
 ]
 const router = createRouter({

src/views/allLifeManage/tab1.vue

@@ -1,184 +1,328 @@
 <template>
-  <div class="draught-fan-list">
+  <div class="knowledge-2">
     <div class="query mg-b-8">
       <div class="query-items">
         <div class="query-item">
-          <div class="lable">场站：</div>
+          <div class="lable">供应商：</div>
           <div class="search-input">
-            <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select" @change="(wpId) => { getLine(); }">
-              <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
+            <el-select v-model="vendor" clearable placeholder="请选择" popper-class="select">
+              <el-option v-for="item in vendorArray" :key="item.company" :value="item.company" :label="item.company" />
             </el-select>
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">线路：</div>
+          <div class="lable">采购单号：</div>
           <div class="search-input">
-            <el-select v-model="lineId" clearable placeholder="请选择" popper-class="select">
-              <el-option v-for="item in lineArray" :key="item.id" :value="item.id" :label="item.name" />
+            <el-input placeholder="请输入描述" size="middle" v-model="ponum" clearable></el-input>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">仓库：</div>
+          <div class="search-input">
+            <el-select v-model="warehouse" clearable placeholder="请选择" popper-class="select">
+              <el-option v-for="item in warehouseArray" :key="item.warehouse" :value="item.warehouse" :label="item.warehouse" />
             </el-select>
           </div>
         </div>
         <div class="query-item">
-					<div class="lable">日期：</div>
-					<div class="search-input">
-						<el-date-picker v-model="recorddate" type="date"
-							value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
-						</el-date-picker>
-					</div>
-				</div>
+          <div class="lable">日期：</div>
+          <div class="search-input">
+            <el-date-picker size="medium" v-model="dateArea" type="datetimerange"
+              :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
+              >
+            </el-date-picker>
+          </div>
+        </div>
+        
+        
       </div>
-      <div class="query-actions">
-        <button class="btn green" @click="search">搜索</button>
+      <div class="query-actions" style="margin-right: 1500px">
+        <button class="btn green" @click="onClickSearch">查询</button>
       </div>
     </div>
-    <NormalScatterChart height="650px" :data="chartData" :showLegend="true" />
+    <div>
+      <ComTable :data="tableData" height="85vh"></ComTable>
+    </div>
   </div>
 </template>
 
 <script>
-import NormalScatterChart from "@com/chart/scatter/normal-scatter-chart.vue";
-export default {
-  // 名称
-  name: "cutAnalyse",
+import ComTable from "@com/coms/table/table.vue";
 
-  // 使用组件
-  components: {
-    NormalScatterChart
-  },
-
-  // 数据
-  data () {
+export default {
+  components: { ComTable },
+  data() {
     return {
-      isAsc: "asc",
-      wpArray: [],
-      lineArray: [],
-      wpId: "",
-      lineId:"",
-      wtId: "MG01_01",
-      recorddate:new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
-      chartData: [{
-        title: "风资源分析",
-        value: []
-      }]
+      dateArea: [
+          this.fmtDate(new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 30))),
+          this.fmtDate(new Date())
+        ],
+      pageSize: 100,
+      pageNum: 1,
+      ponum: "",
+      vendor: "联合动力",
+      vendorArray: [],
+      warehouse: "麻黄山仓库",
+      warehouseArray: [],
+      tableData: {
+        column: [
+          {
+            name: "采购单号",
+            field: "ponum",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "状态",
+            field: "status",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "状态日期",
+            field: "statusdate",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "供应商",
+            field: "vendor",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "总成本",
+            field: "totalcost",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "含税总成本",
+            field: "totaltax",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "地点",
+            field: "sitenum",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "描述",
+            field: "cription",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "库存项目",
+            field: "itemnum",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "仓库",
+            field: "warehouse",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "订购数量",
+            field: "orderqty",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "订购单位",
+            field: "orderunit",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "不含税单价",
+            field: "unitcost",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "含税行成本",
+            field: "linecost",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "录入日期",
+            field: "enterdate",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "录入人",
+            field: "enterby",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "规格型号",
+            field: "modelnum",
+            is_num: false,
+            is_light: false,
+          },
+        ],
+        data: [],
+      },
     };
   },
-
-  // 函数
+  created() {
+    // this.requestSafeList();
+    this.value1 = this.getTime(1);
+		this.value2 = this.getTime(2);
+    this.getVendor();
+    this.getWarehouse();
+    this.requestSafeList();
+  },
   methods: {
-    // 获取风场
-    getWp (reGetWp) {
+    getTime(val) { //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
+				var date = new Date();
+				var year = date.getFullYear(),
+					month = date.getMonth() + 1,
+					day = date.getDate();
+				month >= 1 && month <= 9 ? (month = '0' + month) : '';
+				day >= 0 && day <= 9 ? (day = '0' + day) : '';
+				var begin = year + '-' + month + '-01';
+				var end = year + '-' + month + '-' + day;
+				if (val == 1) {
+					return begin;
+				} else if (val == 2) {
+					return end;
+				}
+			},
+    
+// 获取厂家
+    getVendor () {
       let that = this;
       that.API.requestData({
-        method: "GET",
-        subUrl: "powercompare/windfarmAjax",
+        baseURL: "http://192.168.1.18:9988",
+          subUrl: "companies/list",
         success (res) {
-          that.wpArray = res.data;
-          that.wpId = res.data[0].id;
-          that.getLine();
+          console.log(res.data)
+          that.vendorArray = res.data;
+          that.vendor = res.data[0].company;
         }
       });
     },
-
-    // 获取线路
-    getLine(){
+    // 获取仓库
+    getWarehouse () {
       let that = this;
       that.API.requestData({
-        method: "GET",
-        subUrl: "powercompare/lineWpIdAjax",
-        data:{
-          wpId: that.wpId
-        },
+        baseURL: "http://192.168.1.18:9988",
+          subUrl: "warehouse/list",
         success (res) {
-          that.lineArray = res.data;
-          that.lineId = res.data[0].id;
-          that.getChartData();
+          console.log(res.data)
+          that.warehouseArray = res.data;
+          that.warehouse = res.data[0].warehouse;
         }
       });
     },
 
-    // 获取图表数据
-    getChartData () {
-      let that = this;
-      that.API.requestData({
-        method: "POST",
-        subUrl: "scatter/scatterAjax",
-        data: {
-          wpId: that.wpId,
-          pjId: "",
-          lnId: that.lineId,
-          year: (that.recorddate ? new Date(that.recorddate).getFullYear() : ""),
-          month: (that.recorddate ? (new Date(that.recorddate).getMonth() + 1) : ""),
-        },
-        success (res) {
-          let chartData = [{
-            title: "风资源分析",
-            value: (res.data || [])
-          }];
-          that.$nextTick(()=>{
-            that.chartData = chartData;
-          });
-        }
-      });
+    // 格式化日期
+    fmtDate (date) {
+      let curDate = date || new Date();
+      let year = curDate.getFullYear();
+      let mouth = curDate.getUTCMonth() + 1;
+      let day = curDate.getDate();
+      let hour = curDate.getHours();
+      let minutes = curDate.getMinutes();
+      let seconds = curDate.getSeconds();
+      return year + '-' + (mouth < 10 ? '0' + mouth : mouth) + '-' + (day < 10 ? '0' + day : day) + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
     },
-
-    search () {
-      if (!this.wpId || !this.lineId) {
-        this.BASE.showMsg({
-          msg: '场站与线路为必选项'
+    BeginChange(vl) {
+      this.value1 = vl;
+    },
+    EndChange(vl) {
+      this.value2 = vl;
+    },
+    typeChange(vl) {
+      this.type = vl;
+    },
+    // 搜索按钮
+    onClickSearch() {
+      this.requestSafeList();
+    },
+    // 获取查询列表
+    requestSafeList() {
+      let that = this;
+      if (!that.dateArea || !that.dateArea.length) {
+        that.BASE.showMsg({
+          msg:"请先选择要查询的日期区间后再试"
         });
       } else {
-        this.getChartData();
-      }
-    }
-  },
+        let starttime = (this.dateArea.length ? new Date(this.dateArea[0]).formatDate("yyyy-MM-dd hh:mm:ss") : '');
+        let endtime = (this.dateArea.length ? new Date(this.dateArea[1]).formatDate("yyyy-MM-dd hh:mm:ss") : '');
 
-  created () {
-    this.getWp();
-  },
+        // let data = {
+        //   category1:'SYZ',
+        //   starttime,
+        //   endtime,
+        //   pagenum: that.pageNum,
+        //   pagesize: that.pageSize,
+        //   stationid: that.wpId,
+        // };
 
-  mounted () { },
+        // http://192.168.1.18:9988/poline/list?pagenum=1&pagesize=10&vendor=联合动力&ponum=PO10564&warehouse=麻黄山仓库&starttime=2021-07-08 18:34:40&endtime=2021-07-08 18:34:45
+        that.API.requestData({
+          // baseURL:"http://192.168.1.14:8075/",
+          baseURL: "http://192.168.1.18:9988",
+          subUrl:"poline/list",
+          method:"GET",
+          data: {
+            vendor: that.vendor,
+            ponum: that.ponum,
+            warehouse: that.warehouse,
+            starttime,
+            endtime,
+            pagenum: that.pageNum,
+            pagesize: that.pageSize,
+          },
+          success(res){
+            console.log(res.data.records);
+            if (res.data.records.length) {
+              res.data.records.forEach((ele,index) => {
+                ele.index = (index+1);
+                ele.timeDate = that.fmtDate(new Date(ele.time));
+                if (ele.value > 0) {
+                  ele.value = parseFloat(ele.value).toFixed(4);
+                }
+              });
+              that.tableData.data = res.data.records || [];
+            } else {
+              that.BASE.showMsg({
+                type:"warning",
+                msg:"所选日期区间之内暂无数据，请重试"
+              });
+            }
+            that.showDialog = true;
+          }
+        });
+      }
+      
+      
 
-  unmounted () { },
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped>
-.draught-fan-list {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .btn-group-tabs {
-    display: flex;
-    flex-direction: row;
-
-    .photovoltaic {
-      margin-left: 1.481vh;
-    }
+<style lang="less" scope>
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.knowledge-2 {
+  .el-select {
+    width: 200px;
   }
-
-  .df-table {
-    border: 0.093vh solid fade(@darkgray, 50%);
-    position: relative;
-    overflow: auto;
-    flex-grow: 1;
-    margin-top: 1.481vh;
-    height: 30vh;
-
-    &:before {
-      content: '';
-      width: 0.37vh;
-      height: 0.37vh;
-      background: @write;
-      position: absolute;
-      left: 0.278vh;
-      top: 0.278vh;
-    }
-
-    tbody {
-      height: calc(100vh - 166px);
-    }
+  .el-input {
+    width: 200px;
   }
 }
 </style>

src/views/layout/Menu.vue

@@ -119,16 +119,7 @@ export default {
                   icon: "svg-wind-site",
                   path: "/new/alarmcenter",
                 },
-                {
-                  text: "预警分析",
-                  icon: "svg-wind-site",
-                  path: "/new/alarmcenter1",
-                },
-                {
-                  text: "故障分析",
-                  icon: "svg-wind-site",
-                  path: "/new/alarmcenter2",
-                },
+
                 {
                   text: "停机事件管理",
                   icon: "svg-wind-site",
@@ -214,6 +205,16 @@ export default {
               icon: "svg-wind-site",
               path: "/kxkfx",
               children: [
+                                {
+                  text: "预警分析",
+                  icon: "svg-wind-site",
+                  path: "/new/alarmcenter1",
+                },
+                {
+                  text: "故障分析",
+                  icon: "svg-wind-site",
+                  path: "/new/alarmcenter2",
+                },
                 {
                   text: "预警评判分析",
                   icon: "svg-wind-site",
@@ -232,7 +233,11 @@ export default {
               path: "/fgzyfx",
               children: [
                 {
-                  text: "风资源分析",
+                  text: "风资源散点",
+                  icon: "svg-wind-site",
+                  path: "/windAnalysis",
+                }, {
+                  text: "风资源风向",
                   icon: "svg-wind-site",
                   path: "/windAnalysis",
                 },

src/views/windAnalysis/fxzstab1.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="draught-fan-list">
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">场站：</div>
+          <div class="search-input">
+            <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select">
+              <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
+            </el-select>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">日期：</div>
+          <div class="search-input">
+            <el-date-picker v-model="recorddate" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
+            </el-date-picker>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions">
+        <button class="btn green" @click="search">查询</button>
+      </div>
+    </div>
+    <div class="mg-b-16 arrow-chart" >
+      <panel :title="'场站风向24小时走向情况'"  >
+        <multi-arrow-line-chart :height="'41.296vh'" :showLine="true" :list="chartData" />
+      </panel>
+    </div>
+  </div>
+</template>
+
+<script>
+import Panel from "../../components/coms/panel/panel.vue";
+import multiArrowLineChart from "../../components/chart/line/multi-arrow-line-chart.vue";
+export default {
+  setup() {},
+  components: {
+    Panel,
+    multiArrowLineChart,
+  },
+
+  // 数据
+  data () {
+    return {
+      wpArray: [],
+      wtArray: [],
+      wpId: "MHS_FDC",
+      recorddate: new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
+      chartData: [{
+        title: "风速",
+        value: []
+      }]
+    };
+  },
+
+  // 函数
+  methods: {
+    // 获取风场
+    getWp (reGetWp) {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAjax",
+        success (res) {
+          that.wpArray = res.data;
+          that.wpId = res.data[0].id;
+          that.getChartData();
+        }
+      });
+    },
+
+    // 获取图表数据
+    getChartData () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "winddirection/getWinddirection",
+        data: {
+          wpId: that.wpId,
+          recorddate: that.recorddate,
+          // year: (that.recorddate ? new Date(that.recorddate).getFullYear() : ""),
+          // month: (that.recorddate ? (new Date(that.recorddate).getMonth() + 1) : ""),
+        },
+        success (res) {
+          console.log(res.data);
+          const array = [];
+          for (var {timestr: n, valueObjVo: {value: f,symbolRotate:r,symbolSize:s}} of res.data) {
+            let obj = {'text':n , 'value': f ,'size': s,'route':r};
+            // let temp = 'text: ' + n + ', value: ' + f+ ', size: ' + s+ ', route: ' + r;
+            array.push(obj);
+            
+          }
+          console.log(array);
+          let chartData = [{
+            title: "风速",
+            value: (array || [])
+          }];
+          that.$nextTick(()=>{
+            that.chartData = chartData;
+          });
+        }
+      });
+    },
+
+    search () {
+      if (!this.wpId) {
+        this.BASE.showMsg({
+          msg: '场站为必选项'
+        });
+      } else {
+        this.getChartData();
+      }
+    }
+  },
+
+  created () {
+    this.getWp();
+  },
+
+  mounted () { },
+
+  unmounted () { },
+};
+</script>
+
+<style lang="less" scoped>
+.draught-fan-list {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .btn-group-tabs {
+    display: flex;
+    flex-direction: row;
+
+    .photovoltaic {
+      margin-left: 1.481vh;
+    }
+  }
+
+  .df-table {
+    border: 0.093vh solid fade(@darkgray, 50%);
+    position: relative;
+    overflow: auto;
+    flex-grow: 1;
+    margin-top: 1.481vh;
+    height: 30vh;
+
+    &:before {
+      content: '';
+      width: 0.37vh;
+      height: 0.37vh;
+      background: @write;
+      position: absolute;
+      left: 0.278vh;
+      top: 0.278vh;
+    }
+
+    tbody {
+      height: calc(100vh - 166px);
+    }
+  }
+}
+</style>

src/views/windAnalysis/fxzstab2.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="draught-fan-list">
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">场站：</div>
+          <div class="search-input">
+            <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select" @change="(wpId) => { getProject(); }">
+              <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
+            </el-select>
+          </div>
+        </div>
+        
+        <div class="query-item">
+					<div class="lable">日期：</div>
+					<div class="search-input">
+						<el-date-picker v-model="recorddate" type="date"
+							value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
+						</el-date-picker>
+					</div>
+				</div>
+      </div>
+      <div class="query-actions">
+        <button class="btn green" @click="search">查询</button>
+      </div>
+    </div>
+    <div>
+      <el-row>
+        <el-col :span="8">
+          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
+            <div class="wind-info">
+              <div class="legend mg-r-16">
+                <span class="dot"></span>
+                <span>{{rzdfsStr}}</span>
+              </div>
+              <radar-chart :width="'100%'" :height="'350px'" :value="rzdfsData" />
+            </div>
+          </panel>
+        </el-col>
+        <el-col :span="8">
+          <panel :title="'月最大风速'" class="radar-panel" :icon="'svg-wind-site'">
+            <div class="wind-info">
+              <div class="legend mg-r-16">
+                <span class="dot"></span>
+                <span>{{yzdfsStr}}</span>
+              </div>
+              <radar-chart :width="'100%'" :height="'350px'" :value="yzdfsData" />
+            </div>
+          </panel>
+        </el-col>
+        <el-col :span="8">
+          <panel :title="'年最大风速'" class="radar-panel" :icon="'svg-wind-site'">
+            <div class="wind-info">
+              <div class="legend mg-r-16">
+                <span class="dot"></span>
+                <span>{{nzdfsStr}}</span>
+              </div>
+              <radar-chart :width="'100%'" :height="'350px'" :value="nzdfsData" />
+            </div>
+          </panel>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <panel :title="'日风向频率'" class="radar-panel" :icon="'svg-wind-site'">
+            <div class="wind-info">
+              <div class="legend mg-r-16">
+                <span class="dot"></span>
+                <span>{{rfxplStr}}</span>
+              </div>
+              <radar-chart :width="'100%'" :height="'350px'" :value="rfxplData" />
+            </div>
+          </panel>
+        </el-col>
+        <el-col :span="8">
+          <panel :title="'月风向频率'" class="radar-panel" :icon="'svg-wind-site'">
+            <div class="wind-info">
+              <div class="legend mg-r-16">
+                <span class="dot"></span>
+                <span>{{yfxplStr}}</span>
+              </div>
+              <radar-chart :width="'100%'" :height="'350px'" :value="yfxplData" />
+            </div>
+          </panel>
+        </el-col>
+        <el-col :span="8">
+          <panel :title="'年风向频率'" class="radar-panel" :icon="'svg-wind-site'">
+            <div class="wind-info">
+              <div class="legend mg-r-16">
+                <span class="dot"></span>
+                <span>{{nfxplStr}}</span>
+              </div>
+              <direction-radar-chart :width="'100%'" :height="'350px'" :value="nfxplData" />
+            </div>
+          </panel>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import DirectionRadarChart from "../../components/chart/radar/direction-radar-chart.vue";
+import panel from "../../components/coms/panel/panel.vue";
+import RadarChart from "../../components/chart/radar/radar-chart.vue";
+export default {
+  // 名称
+  name: "cutAnalyse",
+
+  // 使用组件
+  components: { panel,RadarChart,   DirectionRadarChart },
+
+  // 数据
+  data () {
+    return {
+      isAsc: "asc",
+      wpArray: [],
+      projectArray: [],
+      wpId: "",
+      projectId:"",
+      wtId: "MG01_01",
+      rzdfsStr: "",
+      rzdfsData: {
+        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+        data: [{
+          value: [44200, 14200, 20000, 35000, 50000, 38000],
+          name: ""
+        }]
+      },
+
+      yzdfsStr: "",
+      yzdfsData: {
+        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+        data: [{
+          value: [44200, 14200, 20000, 35000, 50000, 38000],
+          name: ""
+        }]
+      },
+
+      nzdfsStr: "",
+      nzdfsData: {
+        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+        data: [{
+          value: [44200, 14200, 20000, 35000, 50000, 38000],
+          name: ""
+        }]
+      },
+
+      rfxplStr: "",
+      rfxplData: {
+        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+        data: [{
+          value: [44200, 14200, 20000, 35000, 50000, 38000],
+          name: ""
+        }]
+      },
+
+      yfxplStr: "",
+      yfxplData: {
+        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+        data: [{
+          value: [44200, 14200, 20000, 35000, 50000, 38000],
+          name: ""
+        }]
+      },
+
+      nfxplStr: "",
+      nfxplData: {
+        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+        data: [{
+          value: [44200, 14200, 20000, 35000, 50000, 38000],
+          name: ""
+        }]
+      },
+      recorddate:new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
+      chartData: [{
+        title: "风资源分析",
+        value: []
+      }]
+    };
+  },
+
+  // 函数
+  methods: {
+    // 获取风场
+    getWp (reGetWp) {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAjax",
+        success (res) {
+          that.wpArray = res.data;
+          that.wpId = res.data[0].id;
+          that.getProject();
+        }
+      });
+    },
+
+    // 获取期数
+    getProject(){
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/projectAjax",
+        data:{
+          wpIds: that.wpId
+        },
+        success (res) {
+          that.projectArray = res.data;
+          that.projectId = res.data[0].id;
+          that.getChartData();
+        }
+      });
+    },
+
+    // tab3,tab4 - 获取玫瑰图
+    getMgt (subUrl, data, dataKey) {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl,
+        data,
+        success (res) {
+          console.log(res.data);
+          that[dataKey.split("Data")[0] + "Str"] = res.data.jfpl || "";
+
+          let mgtData = {
+            indicator: [],
+            data: [{
+              name: "",
+              value: []
+            }]
+          };
+
+          if (res.data.data) {
+            res.data.data.forEach((ele) => {
+              mgtData.indicator.push(ele.name);
+              mgtData.data[0].value.push(ele.data1);
+            });
+          }
+
+          that[dataKey] = mgtData;
+        }
+      });
+    },
+
+   
+
+    // 获取图表数据
+    getChartData () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "scatter/scatterAjax",
+        data: {
+          wpId: "",
+          pjId: that.projectId,
+          lnId: "",
+          year: (that.recorddate ? new Date(that.recorddate).getFullYear() : ""),
+          month: (that.recorddate ? (new Date(that.recorddate).getMonth() + 1) : ""),
+        },
+        success (res) {
+          let chartData = [{
+            title: "风资源分析",
+            value: (res.data || [])
+          }];
+          that.$nextTick(()=>{
+            that.chartData = chartData;
+          });
+        }
+      });
+    },
+
+    search () {
+      if (!this.wpId || !this.projectId) {
+        this.BASE.showMsg({
+          msg: '场站与项目为必选项'
+        });
+      } else {
+        const xhrParam = { wpId: this.wpId, recorddate: this.recorddate };
+        this.getMgt("goodness/wprzdfs", xhrParam, "rzdfsData");
+        this.getMgt("goodness/wpyzdfs", xhrParam, "yzdfsData");
+        this.getMgt("goodness/wpnzdfs", xhrParam, "nzdfsData");
+        this.getMgt("goodness/wprfxpl", xhrParam, "rfxplData");
+        this.getMgt("goodness/wpyfxpl", xhrParam, "yfxplData");
+        this.getMgt("goodness/wpnfxpl", xhrParam, "nfxplData");
+      }
+    }
+  },
+
+  created () {
+    this.getWp();
+  },
+
+  mounted () { },
+
+  unmounted () { },
+};
+</script>
+
+<style lang="less" scoped>
+.draught-fan-list {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .btn-group-tabs {
+    display: flex;
+    flex-direction: row;
+
+    .photovoltaic {
+      margin-left: 1.481vh;
+    }
+  }
+
+  .df-table {
+    border: 0.093vh solid fade(@darkgray, 50%);
+    position: relative;
+    overflow: auto;
+    flex-grow: 1;
+    margin-top: 1.481vh;
+    height: 30vh;
+
+    &:before {
+      content: '';
+      width: 0.37vh;
+      height: 0.37vh;
+      background: @write;
+      position: absolute;
+      left: 0.278vh;
+      top: 0.278vh;
+    }
+
+    tbody {
+      height: calc(100vh - 166px);
+    }
+  }
+}
+</style>

src/views/windAnalysis/fxzstmain.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="health">
+    <div class="selections mg-b-16">
+      <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">风向走势情况</div>
+      <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">风资源玫瑰图</div>
+    </div>
+    <div class="curHeight" v-if="tabIndex == 0">
+      <Tab1 />
+    </div>
+    <div class="curHeight" v-if="tabIndex == 1">
+      <Tab2 />
+    </div>
+  </div>
+</template>
+
+<script>
+import Tab1 from "./fxzstab1.vue";
+import Tab2 from "./fxzstab2.vue";
+export default {
+  // 名称
+  name: "wtSaturability",
+
+  // 使用组件
+  components: {
+    Tab1,
+    Tab2,
+  },
+
+  // 数据
+  data () {
+    const that = this;
+    return {
+      tabIndex: 0,
+    };
+  },
+
+  // 函数
+  methods: {
+    tabSelect (state) {
+      this.tabIndex = state;
+    },
+    // 请求服务
+    requestData () {
+      
+    }
+  },
+
+  created () {
+    this.requestData();
+  },
+
+  mounted () { },
+
+  unmounted () { },
+};
+</script>
+
+<style lang="less" scope>
+.health {
+  .selections {
+    display: flex;
+
+    .item {
+      flex: 0 0 128px;
+      text-align: center;
+      line-height: 33px;
+      margin-right: 8px;
+      color: @font-color;
+      font-size: @fontsize-s;
+      background: fade(@gray, 20);
+      border: 1px solid fade(@gray, 20);
+
+      &:hover,
+      &.active {
+        background: fade(@green, 20);
+        border: 1px solid @green;
+        color: @green;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .curHeight {
+    height: 87vh;
+  }
+}
+</style>