单机性能分析模块上传

src/components/chart/combination/area-bar-chart.vue

@@ -41,7 +41,7 @@ export default {
     },
     lineData: {
       type: Array,
-      default: () => [200, 350, 400, 500, 600, 700, 800, 900, 1200],
+      default: () => [[200, 350, 400, 500, 600, 700, 800, 900, 1200]],
     },
     areaData: {
       type: Array,
@@ -88,23 +88,23 @@ export default {
       default: () => ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
     },
   },
-  data() {
+  data () {
     return {
       id: "",
       chart: null,
     };
   },
   computed: {
-    legend() {
+    legend () {
       let data = this.bardata.legend;
       data.push(this.units[0]);
       return data;
     },
-    areaChartData() {
+    areaChartData () {
       let data = [];
       for (var i = 0; i < this.areaData.length; i++) {
         let item = this.areaData[i];
-        var color = partten.getColor(item.state);
+        var color = (item.color ? item.color : partten.getColor(item.state));
         data.push({
           name: item.name,
           value: [item.start, item.end, item.end - item.start],
@@ -120,7 +120,7 @@ export default {
     },
   },
   methods: {
-    renderItem(params, api) {
+    renderItem (params, api) {
       var start = api.coord([api.value(0)]);
       var end = api.coord([api.value(1)]);
       var height = api.size([0, 1])[1];
@@ -149,7 +149,7 @@ export default {
         }
       );
     },
-    initChart() {
+    initChart () {
       let that = this;
       let chart = echarts.init(this.$el);
 
@@ -203,7 +203,7 @@ export default {
             min: 0,
             axisLabel: {
               show: false,
-              formatter: function(val) {
+              formatter: function (val) {
                 return Math.max(0, val - 0) + " ms";
               },
             },
@@ -262,19 +262,21 @@ export default {
       };
 
       // line data
-      if (this.lineData.length > 0) {
-        option.series.push({
-          name: this.units[0],
-          type: "line",
-          data: this.lineData,
-          smooth: true, //平滑展示
-          yAxisIndex: 0,
-          lineStyle: {
-            color: partten.getColor("green"),
-          },
-          itemStyle: {
-            color: partten.getColor("green"),
-          },
+      if (this.lineData.length) {
+        this.lineData.forEach((ele,index) => {
+          option.series.push({
+            name: this.units[index] || this.units[0] || "",
+            type: "line",
+            data: ele,
+            smooth: true, //平滑展示
+            yAxisIndex: 0,
+            lineStyle: {
+              color: this.color[index]
+            },
+            itemStyle: {
+              color: this.color[index]
+            }
+          });
         });
       }
 
@@ -306,7 +308,7 @@ export default {
           },
           tooltip: {
             show: true,
-            formatter: function(params) {
+            formatter: function (params) {
               return params.marker + params.name + ": " + params.value[2] + "s";
             },
           },
@@ -320,7 +322,7 @@ export default {
 
       chart.setOption(option);
 
-      chart.on("click", function(e, p) {
+      chart.on("click", function (e, p) {
         if (e.seriesType == "custom") {
           that.$emit("areaClick", { data: e.data.exData });
         }
@@ -330,17 +332,17 @@ export default {
   emits: {
     areaClick: null,
   },
-  created() {
+  created () {
     this.id = "pie-chart-" + util.newGUID();
   },
-  mounted() {
+  mounted () {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
       this.initChart();
     });
   },
-  updated() {
+  updated () {
     this.$nextTick(() => {
       this.initChart();
     });

src/router/index.js

@@ -381,8 +381,8 @@ const routes = [{
             import ( /* webpackChunkName: "sandtable" */ "../views/SandTable/SandTable.vue"),
     },
     {
-        path: "/new/dj1",
-        name: "dj1",
+        path: "/performanceAnalysis", // 单机性能分析
+        name: "performanceAnalysis",
         component: () =>
             import ( /* webpackChunkName: "dj1" */ "../views/NewPages/dj1.vue"),
     },

src/views/NewPages/dj1.vue

@@ -6,35 +6,37 @@
         <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(4)" :class="{ active: tabIndex == 4 }">风机切入切出分析</div>
       </div>
       <div class="query mg-b-16">
         <div class="query-items">
           <div class="query-item">
             <div class="lable">风场：</div>
             <div class="search-input">
-              <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select" @change="getWtArray">
+                <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="value2" multiple placeholder="请选择" popper-class="select">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              <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="value4" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
+              <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">搜索</button>
+          <button class="btn green" @click="search">搜索</button>
         </div>
       </div>
     </div>
@@ -42,7 +44,8 @@
     <!-- tab1 -->
     <div v-if="tabIndex == 0" class="tab-1">
       <panel :title="'损失电量分析'" class="mg-b-16">
-        <area-bar-chart :height="'23.1481vh'" />
+        <area-bar-chart :height="'23.1481vh'" :bardata="{ legend: [] }" :lineData="lostChartData" :units="lostChartUnit"
+          :areaData="LostChartBgColorData" />
       </panel>
       <panel :title="'电量'" class="mg-b-16">
         <multiple-bar-line-chart :height="'16.6667vh'" />
@@ -245,8 +248,8 @@ import panel from "../../components/coms/panel/panel.vue";
 import Table from "../../components/coms/table/table.vue";
 export default {
   components: { panel, AreaBarChart, MultipleBarLineChart, Table, MarkerLineChart, DirectionRadarChart, DualPieChart },
-  setup() {},
-  data() {
+  setup () { },
+  data () {
     return {
       tabIndex: 0,
       tableData: {
@@ -278,6 +281,18 @@ export default {
           },
         ],
       },
+
+      wpArray: [],
+      wpId: "",
+      wtArray: [],
+      wtId: "",
+
+      recorddate: new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
+
+      lostChartData: [],
+      lostChartUnit: [],
+      LostChartBgColorData: [],
+
       options: [
         {
           value: "选项1",
@@ -308,14 +323,117 @@ export default {
     };
   },
   methods: {
-    tabSelect(state) {
+    // 获取风场
+    getWpArray () {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAjax",
+        success (res) {
+          that.wpArray = res.data;
+          that.wpId = res.data[0].id;
+          that.getWtArray(that.wpId, true);
+        }
+      });
+    },
+
+    // 获取风场
+    getWtArray (wpId, keepRequest) {
+      let that = this;
+      if (wpId) {
+        that.API.requestData({
+          method: "GET",
+          subUrl: "powercompare/windturbineAjax",
+          data: {
+            wpId
+          },
+          success (res) {
+            that.wtArray = res.data;
+            that.wtId = res.data[0].id;
+            if (keepRequest) {
+              that.getLostChartData();
+            }
+          }
+        });
+      } else {
+        that.wtArray = [];
+        that.wtId = "";
+      }
+    },
+
+    // 获取损失电量分析图表数据
+    getLostChartData () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "goodness/findWtRealPowerChar",
+        data: {
+          wtId: that.wtId,
+          recorddate: that.recorddate
+        },
+        success (res) {
+          console.log(111, res.data);
+          const keyArray = ["value1", "value2", "value3", "value4"];
+
+          let lostChartData = [[], [], [], []];
+          const lostChartUnit = ["实发功率", "保证功率", "风速", "状态"];
+
+
+          keyArray.forEach((key, keyIndex) => {
+            res.data.forEach(ele => {
+              lostChartData[keyIndex].push(ele[key]);
+            });
+          });
+          that.lostChartData = lostChartData;
+          that.lostChartUnit = lostChartUnit;
+          that.getLostChartBgColorData();
+        }
+      });
+    },
+
+    // 获取损失电量分析图表背景颜色
+    getLostChartBgColorData () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "goodness/getplotBands",
+        data: {
+          wtId: that.wtId,
+          recorddate: that.recorddate
+        },
+        success (res) {
+          console.log(222, res.data);
+          let LostChartBgColorData = [];
+          res.data.forEach((pEle, pIndex) => {
+            LostChartBgColorData.push({
+              name: pEle[0].name,
+              start: (pIndex ? LostChartBgColorData[pIndex - 1].end : 0),
+              end: (pIndex ? LostChartBgColorData[pIndex - 1].end : 0) + ((new Date(pEle[0].time2).getTime() / 1000) - (new Date(pEle[0].time1).getTime() / 1000)),
+              color: pEle[0].itemStyle.color
+            });
+          });
+          console.log(333, LostChartBgColorData);
+          that.LostChartBgColorData = LostChartBgColorData;
+        }
+      });
+    },
+
+    tabSelect (state) {
       this.tabIndex = state;
     },
+
+    // 搜索
+    search () {
+      if (this.tabIndex === 0) {
+        this.getLostChartData();
+      }
+    }
   },
-  created() {
+  created () {
     for (let i = 1; i < 50; i++) {
       this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
     }
+    this.getWpArray();
   },
 };
 </script>

src/views/realSearch/index.vue

@@ -15,7 +15,7 @@
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">描述：</div>
+          <div class="lable"></div>
           <div class="search-input">
             <el-checkbox v-model="form.autoReq" label="刷新" border @change="reReqAjax"></el-checkbox>
           </div>