单机状态监视详情页面上传

src/router/index.js

@@ -252,11 +252,26 @@ const routes = [
     component: () => import('../views/realSearch/index.vue'),
   },
   {
-    path: '/singleAnalysis', // 单机性能分析
+    path: '/singleAnalysis', // 单机月度分析
     name: 'singleAnalysis',
     component: () => import('../views/singleAnalysis/index.vue'),
   },
   {
+    path: '/performanceAnalysis', // 单机性能分析
+    name: 'performanceAnalysis',
+    component: () => import('../views/performanceAnalysis/index.vue'),
+    children: [{
+      path: "detail/:wpId",
+      name: "performanceAnalysisDetail",
+      component: () => import("../views/performanceAnalysis/detail/index.vue"),
+    }]
+  },
+  {
+    path: '/performanceAnalysis/detail/:wpId', // 单机性能分析详情页
+    name: 'performanceAnalysisDetail',
+    component: () => import('../views/performanceAnalysis/detail/index.vue'),
+  },
+  {
     path: '/historySearch', // 测点历史数据查询
     name: 'historySearch',
     component: () => import('../views/historySearch/index.vue'),

src/views/layout/Menu.vue

@@ -142,12 +142,12 @@ export default {
                 {
                   text: "单机性能分析",
                   icon: "svg-wind-site",
-                  path: "/nxfx5",
+                  path: "/performanceAnalysis",
                 },
                 {
                   text: "单机月度分析",
                   icon: "svg-wind-site",
-                  path: "/nxfx6",
+                  path: "/singleAnalysis",
                 },
                 {
                   text: "单机饱和度",

src/views/performanceAnalysis/detail/index.vue

@@ -0,0 +1,105 @@
+<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 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(4)" :class="{ active: tabIndex == 4 }">风机切入切出分析</div>
+    </div>
+    <div class="curHeight" v-if="tabIndex == 0">
+      <Tab1 />
+    </div>
+    <div class="curHeight" v-if="tabIndex == 1">
+      <Tab2 />
+    </div>
+    <div class="curHeight" v-if="tabIndex == 2">
+      <Tab3 />
+    </div>
+    <div class="curHeight" v-if="tabIndex == 3">
+      <Tab4 />
+    </div>
+    <div class="curHeight" v-if="tabIndex == 4">
+      <Tab5 />
+    </div>
+  </div>
+</template>
+
+<script>
+import Tab1 from "./tab1.vue";
+import Tab2 from "./tab2.vue";
+import Tab3 from "./tab3.vue";
+import Tab4 from "./tab4.vue";
+import Tab5 from "./tab5.vue";
+export default {
+  // 名称
+  name: "wtSaturability",
+
+  // 使用组件
+  components: {
+    Tab1,
+    Tab2,
+    Tab3,
+    Tab4,
+    Tab5
+  },
+
+  // 数据
+  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>

src/views/performanceAnalysis/detail/tab1.vue

@@ -0,0 +1,171 @@
+<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>
+    <Mlc height="650px" :list="chartData" :units="chartUnit" :showLegend="true" />
+  </div>
+</template>
+
+<script>
+import Mlc from "@com/chart/line/multiple-line-chart.vue";
+export default {
+  // 名称
+  name: "cutAnalyse",
+
+  // 使用组件
+  components: {
+    Mlc
+  },
+
+  // 数据
+  data () {
+    return {
+      isAsc: "asc",
+      wpArray: [],
+      wtArray: [],
+      wpId: "",
+      wtId: "MG01_01",
+      recorddate:new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
+      chartData: [{
+        title: "",
+        yAxisIndex: 0,
+        value: []
+      }],
+      chartUnit: ["功率(万kw)"]
+    };
+  },
+
+  // 函数
+  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: "powersaturation/powersaturationamonutchart",
+        data: {
+          wtId: that.wtId
+        },
+        success (res) {
+
+          const keyArray = [{
+            key: "value1",
+            title: "功率"
+          }];
+
+          let chartData = [{
+            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.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/performanceAnalysis/detail/tab2.vue

@@ -0,0 +1,197 @@
+<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-select v-model="projectId" clearable placeholder="请选择" popper-class="select">
+              <el-option v-for="item in projectArray" :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>
+    <Mlc height="650px" :list="chartData" :units="chartUnit" :showLegend="true" />
+  </div>
+</template>
+
+<script>
+import Mlc from "@com/chart/line/multiple-line-chart.vue";
+export default {
+  // 名称
+  name: "cutAnalyse",
+
+  // 使用组件
+  components: {
+    Mlc
+  },
+
+  // 数据
+  data () {
+    return {
+      isAsc: "asc",
+      wpArray: [],
+      projectArray: [],
+      wpId: "",
+      projectId:"",
+      wtId: "MG01_01",
+      recorddate:new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
+      chartData: [{
+        title: "",
+        yAxisIndex: 0,
+        value: []
+      }],
+      chartUnit: ["功率(万kw)"]
+    };
+  },
+
+  // 函数
+  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();
+        }
+      });
+    },
+
+    // 获取图表数据
+    getChartData () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "powersaturation/powersaturationamonutchart",
+        data: {
+          wtId: that.wtId
+        },
+        success (res) {
+
+          const keyArray = [{
+            key: "value1",
+            title: "功率"
+          }];
+
+          let chartData = [{
+            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.projectId) {
+        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/performanceAnalysis/detail/tab3.vue

@@ -0,0 +1,197 @@
+<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) => { getLine(); }">
+              <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="lineId" clearable placeholder="请选择" popper-class="select">
+              <el-option v-for="item in lineArray" :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>
+    <Mlc height="650px" :list="chartData" :units="chartUnit" :showLegend="true" />
+  </div>
+</template>
+
+<script>
+import Mlc from "@com/chart/line/multiple-line-chart.vue";
+export default {
+  // 名称
+  name: "cutAnalyse",
+
+  // 使用组件
+  components: {
+    Mlc
+  },
+
+  // 数据
+  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: "",
+        yAxisIndex: 0,
+        value: []
+      }],
+      chartUnit: ["功率(万kw)"]
+    };
+  },
+
+  // 函数
+  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.getLine();
+        }
+      });
+    },
+
+    // 获取线路
+    getLine(){
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/lineWpIdAjax",
+        data:{
+          wpId: that.wpId
+        },
+        success (res) {
+          that.lineArray = res.data;
+          that.lineId = res.data[0].id;
+          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: "功率"
+          }];
+
+          let chartData = [{
+            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.lineId) {
+        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/performanceAnalysis/detail/tab4.vue

@@ -0,0 +1,197 @@
+<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) => { getLine(); }">
+              <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="lineId" clearable placeholder="请选择" popper-class="select">
+              <el-option v-for="item in lineArray" :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>
+    <Mlc height="650px" :list="chartData" :units="chartUnit" :showLegend="true" />
+  </div>
+</template>
+
+<script>
+import Mlc from "@com/chart/line/multiple-line-chart.vue";
+export default {
+  // 名称
+  name: "cutAnalyse",
+
+  // 使用组件
+  components: {
+    Mlc
+  },
+
+  // 数据
+  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: "",
+        yAxisIndex: 0,
+        value: []
+      }],
+      chartUnit: ["功率(万kw)"]
+    };
+  },
+
+  // 函数
+  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.getLine();
+        }
+      });
+    },
+
+    // 获取线路
+    getLine(){
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/lineWpIdAjax",
+        data:{
+          wpId: that.wpId
+        },
+        success (res) {
+          that.lineArray = res.data;
+          that.lineId = res.data[0].id;
+          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: "功率"
+          }];
+
+          let chartData = [{
+            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.lineId) {
+        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/performanceAnalysis/detail/tab5.vue

@@ -0,0 +1,197 @@
+<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) => { getLine(); }">
+              <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="lineId" clearable placeholder="请选择" popper-class="select">
+              <el-option v-for="item in lineArray" :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>
+    <Mlc height="650px" :list="chartData" :units="chartUnit" :showLegend="true" />
+  </div>
+</template>
+
+<script>
+import Mlc from "@com/chart/line/multiple-line-chart.vue";
+export default {
+  // 名称
+  name: "cutAnalyse",
+
+  // 使用组件
+  components: {
+    Mlc
+  },
+
+  // 数据
+  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: "",
+        yAxisIndex: 0,
+        value: []
+      }],
+      chartUnit: ["功率(万kw)"]
+    };
+  },
+
+  // 函数
+  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.getLine();
+        }
+      });
+    },
+
+    // 获取线路
+    getLine(){
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/lineWpIdAjax",
+        data:{
+          wpId: that.wpId
+        },
+        success (res) {
+          that.lineArray = res.data;
+          that.lineId = res.data[0].id;
+          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: "功率"
+          }];
+
+          let chartData = [{
+            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.lineId) {
+        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/performanceAnalysis/index.vue

@@ -0,0 +1,609 @@
+<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>
+				<button class="btn green" @click="exportExcel">导出</button>
+			</div>
+		</div>
+    <div class="df-table">
+      <ComTable height="78vh" :data="tableData"></ComTable>
+    </div>
+    <el-dialog title="切入切出风速整合历史" v-model="dialogShow" width="85%" top="10vh" custom-class="modal" :close-on-click-modal="true" @closed="dialogType = ''">
+      <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="wpId2" clearable placeholder="请选择"
+							popper-class="select" @change="reGetWtArray">
+							<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 class="query-item">
+					<div class="lable">开始日期：</div>
+					<div class="search-input">
+						<el-date-picker v-model="beginDate" type="date"
+							value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
+						</el-date-picker>
+					</div>
+				</div>
+				<div class="query-item">
+					<div class="lable">结束日期：</div>
+					<div class="search-input">
+						<el-date-picker v-model="endDate" 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="reGetHistoryTableData">查询</button>
+				<button class="btn green" @click="exportExcel2">导出</button>
+			</div>
+		</div>
+      <ComTable height="78vh" :data="historyTableData"></ComTable>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import ComTable from "@com/coms/table/table.vue";
+export default {
+  // 名称
+  name: "cutAnalyse",
+
+  // 使用组件
+  components: {
+   ComTable
+  },
+
+  // 数据
+  data() {
+    const that = this;
+    return {
+      isAsc:"asc",
+      wpArray:[],
+      wtArray:[],
+      wpId:"",
+      wtId:"",
+      wpId2:"",
+      recorddate:new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
+      beginDate:"",
+      endDate:"",
+      dialogShow:false,
+
+      tableData: {
+        column: [
+          {
+            name: "风场",
+            field: "name",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "风机",
+            field: "windturbineid",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "型号",
+            field: "modelid",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日排行榜",
+            field: "daytop",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日拟合优度(%)",
+            field: "daygoodness",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日风速(m/s)",
+            field: "dayspeed",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "月排行榜",
+            field: "monthtop",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "月拟合优度(%)",
+            field: "monthgoodness",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "月风速(m/s)",
+            field: "monthspeed",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "年排行榜",
+            field: "yeartop",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "年拟合优度(%)",
+            field: "yeargoodness",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "年风速(m/s)",
+            field: "yearspeed",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "操作",
+            field: "",
+            is_num: false,
+            is_light: false,
+            template() {
+								return "<el-button type='text' style='cursor: pointer;'>详情</el-button>";
+						},
+            click(e, row){
+              that.jumpUrl(row);
+            }
+          },
+          {
+            name: "操作",
+            field: "",
+            is_num: false,
+            is_light: false,
+            template() {
+								return "<el-button type='text' style='cursor: pointer;'>历史</el-button>";
+						},
+            click(e, row){
+              that.getOutputspeedHistoryList(row);
+            }
+          }
+        ],
+        data: [],
+      },
+
+      historyTableData: {
+        column: [
+          {
+            name: "日期",
+            field: "time",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "风机",
+            field: "windturbineid",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日发电量",
+            field: "c1",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日理论发电量",
+            field: "c2",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日平均功率",
+            field: "c3",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日运行小时",
+            field: "c4",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日待机小时",
+            field: "c5",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日故障小时",
+            field: "c6",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日维护小时",
+            field: "c7",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日终端小时",
+            field: "c8",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日有效风时",
+            field: "c9",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日损失电量",
+            field: "c10",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日报警次数",
+            field: "c11",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日停机次数",
+            field: "c12",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日不饱和次数",
+            field: "c13",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日设备可利用率",
+            field: "c14",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日平均温度",
+            field: "c15",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日平均湿度",
+            field: "c16",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日平均压强",
+            field: "c17",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日拟合优度",
+            field: "c18",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+          {
+            name: "日实际/保证",
+            field: "c19",
+            is_num: false,
+            is_light: false,
+            sortable: true
+          },
+        ],
+        data: [],
+      },
+    };
+  },
+
+  // 函数
+  methods: {
+    // 请求服务
+    requestData() {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAjax",
+        success(res) {
+          that.wpArray=res.data;
+          that.wpId=res.data[0].id;
+          that.getOutputSpeedList(that.wpId)
+        }
+      });
+    },
+
+    getOutputSpeedList(wpId){
+      let that = this;
+      if(!that.wpId || !that.recorddate){
+        that.BASE.showMsg({
+          msg:"场站与日期不可为空"
+        });
+      }else{
+        that.API.requestData({
+          method: "POST",
+          subUrl: "goodness/windturbinegoodness",
+          data:{
+            wpId,
+            isAsc:that.isAsc,
+            recorddate:that.recorddate
+          },
+          success(res) {
+            that.tableData.data = res.data.list;
+          }
+        });
+      }
+      
+    },
+
+    getOutputspeedHistoryList (item){
+      let that = this;
+
+      that.API.requestData({
+          method: "GET",
+          subUrl: "powercompare/windturbineAjax",
+          data:{
+            wpId: item.windtpowerstationid
+          },
+          success(res) {
+            that.wtArray=res.data;
+
+            that.wpId2 = item.windtpowerstationid;
+            that.wtId = item.windturbineid;
+            that.beginDate = (new Date().formatDate("yyyy-MM") + '-01');
+            that.endDate = new Date().formatDate("yyyy-MM-dd");
+
+            that.API.requestData({
+              method: "POST",
+              subUrl: "goodness/goodhistorylist",
+              data:{
+                wpId: that.wpId2,
+                wtId: that.wtId,
+                beginDate: that.beginDate,
+                endDate: that.endDate
+              },
+              success(res) {
+                res.data.forEach(ele=>{
+                  ele.time=new Date(ele.recorddate).formatDate("yyyy-MM-dd");
+                });
+                that.historyTableData.data = res.data;
+                that.dialogShow = true;
+              }
+            });
+          }
+        });
+    },
+
+    reGetWtArray(){
+      let that = this;
+      that.API.requestData({
+          method: "GET",
+          subUrl: "powercompare/windturbineAjax",
+          data:{
+            wpId: that.wpId2
+          },
+          success(res) {
+            that.wtArray=res.data;
+            that.wtId = res.data[0].id;
+          }
+        });
+    },
+
+    reGetHistoryTableData(){
+      let that=this;
+      if(!that.wpId2){
+        that.BASE.showMgs({
+          msg:"场站不可为空"
+        });
+      }else if(!that.wtId){
+        that.BASE.showMgs({
+          msg:"风机不可为空"
+        });
+      }else if(!that.beginDate || !that.endDate){
+        that.BASE.showMgs({
+          msg:"开始日期与结束日期不可为空"
+        });
+      }else{
+        that.API.requestData({
+          method: "POST",
+          subUrl: "goodness/goodhistorylist",
+          data:{
+            wpId: that.wpId2,
+            wtId: that.wtId,
+            beginDate: that.beginDate,
+            endDate: that.endDate
+          },
+          success(res) {
+            res.data.forEach(ele=>{
+              ele.time=new Date(ele.recorddate).formatDate("yyyy-MM-dd");
+            });
+            that.historyTableData.data = res.data;
+            that.dialogShow = true;
+          }
+        });
+      }
+    },
+
+    search(){
+      this.getOutputSpeedList(this.wpId);
+    },
+
+    // 外围表格导出excel
+    exportExcel () {
+      let that = this;
+      const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径      
+      
+      // const tHeader = ['点名', '描述']; // 上面设置Excel的表格第一行的标题       
+      // const filterVal = ['id', 'name']; // 上面的index、nickName、name是tableData里对象的属性key值   
+      
+      let tHeader = []; // 上面设置Excel的表格第一行的标题       
+      let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值
+
+      that.tableData.column.forEach(ele=>{
+        if(ele.name !== "操作"){
+          tHeader.push(ele.name);
+          filterVal.push(ele.field);
+        }
+      });
+
+      const list = that.tableData.data; //把要导出的数据tableData存到list 
+      const data = that.formatJson(filterVal, list);
+      export_json_to_excel(tHeader, data, '导出的Excel'); // 最后一个是表名字
+    },
+
+    // 弹窗表格导出excel
+    exportExcel2 () {
+      let that = this;
+      const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径      
+      
+      // const tHeader = ['点名', '描述']; // 上面设置Excel的表格第一行的标题       
+      // const filterVal = ['id', 'name']; // 上面的index、nickName、name是tableData里对象的属性key值   
+      
+      let tHeader = []; // 上面设置Excel的表格第一行的标题       
+      let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值
+
+      that.historyTableData.column.forEach(ele=>{
+        if(ele.name !== "操作"){
+          tHeader.push(ele.name);
+          filterVal.push(ele.field);
+        }
+      });
+
+      const list = that.historyTableData.data; //把要导出的数据tableData存到list 
+      const data = that.formatJson(filterVal, list);
+      export_json_to_excel(tHeader, data, '导出的Excel'); // 最后一个是表名字
+    },
+
+    formatJson (filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]));
+    },
+
+    // 页面跳转
+    jumpUrl(item){
+      this.$router.push(`/performanceAnalysis/detail/${item.windtpowerstationid}`);
+    }
+  },
+
+  created() {
+    this.requestData();
+  },
+
+  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;
+
+    &:before {
+      content: "";
+      width: 0.37vh;
+      height: 0.37vh;
+      background: @write;
+      position: absolute;
+      left: 0.278vh;
+      top: 0.278vh;
+    }
+
+    tbody {
+      height: calc(100vh - 166px);
+    }
+  }
+}
+</style>