单机饱和度模块tab1完成

src/views/wtSaturability/index.vue

@@ -9,7 +9,7 @@
       <Tab1 />
     </div>
     <div class="curHeight" v-if="tabIndex == 1">
-      111
+      <Tab2 />
     </div>
     <div class="curHeight" v-if="tabIndex == 2">
       222
@@ -19,13 +19,15 @@
 
 <script>
 import Tab1 from "./tab1.vue";
+import Tab2 from "./tab2.vue";
 export default {
   // 名称
   name: "wtSaturability",
 
   // 使用组件
   components: {
-    Tab1
+    Tab1,
+    Tab2
   },
 
   // 数据

src/views/wtSaturability/tab1.vue

@@ -5,13 +5,11 @@
         <div class="query-item">
           <div class="lable">场站：</div>
           <div class="search-input">
-            <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select">
+            <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select" @change="(wpId) => { getWt(wpId, true); }">
               <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
             </el-select>
           </div>
         </div>
-      </div>
-      <div class="query-items">
         <div class="query-item">
           <div class="lable">风机：</div>
           <div class="search-input">
@@ -22,11 +20,11 @@
         </div>
       </div>
       <div class="query-actions">
-        <button class="btn green" @click="search()">搜索</button>
+        <button class="btn green" @click="search">搜索</button>
       </div>
     </div>
     <div class="df-table">
-      <ComTable height="100vh" :data="tableData"></ComTable>
+      <ComTable height="35vh" :data="tableData"></ComTable>
     </div>
     <Mlc height="300px" :list="chartData" :units="chartUnit" :showLegend="true" />
   </div>
@@ -87,14 +85,14 @@ export default {
         yAxisIndex: 0,
         value: []
       }],
-      chartUnit: ["功率(MW)"]
+      chartUnit: ["功率(MW)", "(m/s)"]
     };
   },
 
   // 函数
   methods: {
     // 获取风场
-    getWp () {
+    getWp (reGetWp) {
       let that = this;
       that.API.requestData({
         method: "GET",
@@ -102,13 +100,13 @@ export default {
         success (res) {
           that.wpArray = res.data;
           that.wpId = res.data[0].id;
-          that.getWt(that.wpId)
+          that.getWt(that.wpId, reGetWp);
         }
       });
     },
 
     // 获取风机
-    getWt (wpid) {
+    getWt (wpid, reGetWp) {
       let that = this;
       if (that.wpId) {
         that.API.requestData({
@@ -121,7 +119,9 @@ export default {
           success (res) {
             that.wtArray = res.data;
             that.wtId = res.data[0].id;
-            that.getTab1Data();
+            if (!reGetWp) {
+              that.getTab1Data();
+            }
           }
         });
       }
@@ -137,10 +137,41 @@ export default {
         },
         success (res) {
           that.tableData.data = res.data.list;
+          that.getChartData();
+        }
+      });
+    },
 
-          const key = ["actualpower", "optimalpower", "optmalpower"];
+    // 获取图表数据
+    getChartData () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "powersaturation/powersaturationamonutchart",
+        data: {
+          wtId: that.wtId
+        },
+        success (res) {
+
+          const keyArray = [{
+            key: "value1",
+            title: "风速"
+          }, {
+            key: "value2",
+            title: "实际拟合功率"
+          }, {
+            key: "value3",
+            title: "最优拟合功率"
+          }, {
+            key: "value4",
+            title: "保证功率"
+          }];
 
           let chartData = [{
+            title: "风速",
+            yAxisIndex: 1,
+            value: []
+          }, {
             title: "实际拟合功率",
             yAxisIndex: 0,
             value: []
@@ -154,11 +185,11 @@ export default {
             value: []
           }];
 
-          key.forEach((keyEle, keyIndex)=>{
-            res.data.list.forEach(ele=>{
+          keyArray.forEach((keyEle, keyIndex) => {
+            res.data.forEach(ele => {
               chartData[keyIndex].value.push({
-                text:ele.id,
-                value:ele[keyEle]
+                text: "",
+                value: ele[keyEle.key]
               });
             });
           });
@@ -211,7 +242,7 @@ export default {
     overflow: auto;
     flex-grow: 1;
     margin-top: 1.481vh;
-    height:60vh;
+    height: 30vh;
 
     &:before {
       content: '';

src/views/wtSaturability/tab2.vue

@@ -0,0 +1,262 @@
+<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) => { getWt(wpId, true); }">
+              <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-select v-model="wtId" clearable placeholder="请选择" popper-class="select">
+              <el-option v-for="item in wtArray" :key="item.id" :value="item.id" :label="item.name" />
+            </el-select>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions">
+        <button class="btn green" @click="search">搜索</button>
+      </div>
+    </div>
+    <div class="df-table">
+      <ComTable height="35vh" :data="tableData"></ComTable>
+    </div>
+    <Mlc height="300px" :list="chartData" :units="chartUnit" :showLegend="true" />
+  </div>
+</template>
+
+<script>
+import ComTable from "@com/coms/table/table.vue";
+import Mlc from "@com/chart/line/multiple-line-chart.vue";
+export default {
+  // 名称
+  name: "cutAnalyse",
+
+  // 使用组件
+  components: {
+    ComTable,
+    Mlc
+  },
+
+  // 数据
+  data () {
+    return {
+      isAsc: "asc",
+      wpArray: [],
+      wtArray: [],
+      wpId: "",
+      wtId: "",
+      tableData: {
+        column: [
+          {
+            name: "风机",
+            field: "windturbineid",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "风速",
+            field: "speed",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "实际拟合功率",
+            field: "actualpower",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "最优拟合功率",
+            field: "optimalpower",
+            is_num: false,
+            is_light: false,
+          }
+        ],
+        data: [],
+      },
+      chartData: [{
+        title: "",
+        yAxisIndex: 0,
+        value: []
+      }],
+      chartUnit: ["功率(MW)", "(m/s)"]
+    };
+  },
+
+  // 函数
+  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.getWt(that.wpId, reGetWp);
+        }
+      });
+    },
+
+    // 获取风机
+    getWt (wpid, reGetWp) {
+      let that = this;
+      if (that.wpId) {
+        that.API.requestData({
+          method: "GET",
+          baseURL: "http://10.155.32.4:9001",
+          subUrl: "benchmarking/wtList",
+          data: {
+            wpid
+          },
+          success (res) {
+            that.wtArray = res.data;
+            that.wtId = res.data[0].id;
+            if (!reGetWp) {
+              that.getTab1Data();
+            }
+          }
+        });
+      }
+    },
+
+    getTab1Data () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "powersaturation/powersaturationamonutlist",
+        data: {
+          wtId: that.wtId
+        },
+        success (res) {
+          that.tableData.data = res.data.list;
+          that.getChartData();
+        }
+      });
+    },
+
+    // 获取图表数据
+    getChartData () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "powersaturation/powersaturationamonutchart",
+        data: {
+          wtId: that.wtId
+        },
+        success (res) {
+
+          const keyArray = [{
+            key: "value1",
+            title: "风速"
+          }, {
+            key: "value2",
+            title: "实际拟合功率"
+          }, {
+            key: "value3",
+            title: "最优拟合功率"
+          }, {
+            key: "value4",
+            title: "保证功率"
+          }];
+
+          let chartData = [{
+            title: "风速",
+            yAxisIndex: 1,
+            value: []
+          }, {
+            title: "实际拟合功率",
+            yAxisIndex: 0,
+            value: []
+          }, {
+            title: "最优拟合功率",
+            yAxisIndex: 0,
+            value: []
+          }, {
+            title: "保证功率",
+            yAxisIndex: 0,
+            value: []
+          }];
+
+          keyArray.forEach((keyEle, keyIndex) => {
+            res.data.forEach(ele => {
+              chartData[keyIndex].value.push({
+                text: "",
+                value: ele[keyEle.key]
+              });
+            });
+          });
+
+          that.chartData = chartData;
+        }
+      });
+    },
+
+    search () {
+      if (!this.wpId || !this.wtId) {
+        this.BASE.showMsg({
+          msg: '场站与风机为必选项'
+        });
+      } else {
+        this.getTab1Data();
+      }
+    }
+  },
+
+  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>