曲线偏差率排行榜

src/components/coms/table/table-qc.vue

@@ -0,0 +1,426 @@
+<template>
+  <table class="com-table">
+    <thead>
+      <tr>
+        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" :style="{ width: col.width }" @click="onSort(col)">
+          {{ col.name }}
+        </th>
+      </tr>
+    </thead>
+    <el-scrollbar>
+      <tbody :style="{ height: height }">
+        <tr v-for="(row, index) of tableData" :key="index">
+          <td
+            v-for="(col, i) of data.column"
+            :key="i"
+            :style="{ width: col.width }"
+            :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }"
+            @mouseenter="hover(row, col)"
+            @mouseleave="leave()"
+          >
+            <component :is="col.type ? col.type : 'div'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)"> </component>
+          </td>
+        </tr>
+      </tbody>
+    </el-scrollbar>
+    <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="data.total"> </el-pagination>
+  </table>
+    <el-dialog :title="dialogTitle" v-model="dialogShow" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="true" @closed="dialogType = ''">
+      <div class="chart" id="chartDiv" height="500px"></div>
+    </el-dialog>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    data: Object,
+    // hover 样式
+    showHover: {
+      type: Boolean,
+      default: true,
+    },
+    // 列高亮
+    showColHover: {
+      type: Boolean,
+      default: false,
+    },
+    canScroll: {
+      type: Boolean,
+      default: true,
+    },
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    height: {
+      type: String,
+      default: "",
+    },
+  },
+  // 自定义事件
+  emits: {
+    // 分页事件
+    onPagging: null,
+  },
+  // 数据
+  data() {
+    return {
+      hoverRow: -1,
+      hoverCol: -1,
+      sortCol: "",
+      sortType: "",
+      currentPage: 1,
+      dialogShow: false,
+      dialogTitle:"",
+      dialogData:{},
+    };
+  },
+  computed: {
+    tableData() {
+      let that = this;
+      if (this.sortCol == "") {
+        return this.data.data;
+      } else {
+        let data = this.data.data;
+
+        data.sort((a, b) => {
+          let rev = 1;
+          if (that.sortType == "ASC") rev = 1;
+          else if (that.sortType == "DESC") rev = -1;
+
+          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+          return 0;
+        });
+        return data;
+      }
+    },
+    pageable() {
+      return this.pageSize != 0;
+    },
+    pages() {
+      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+      else return 0;
+    },
+    startRow() {
+      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+      else return 0;
+    },
+    endRow() {
+      if (this.pageable) return this.currentPage * this.pageSize;
+      else return this.data.data.length;
+    },
+  },
+  // 函数
+  methods: {
+    clearCheckBox(time){
+      this.$nextTick(()=>{
+        setTimeout(()=>{
+          const domArray = document.querySelectorAll(".curCheckBox");
+          for(let i=0;i<domArray.length;i++){
+            domArray[i].checked=false;
+          }
+        },(time || 300));
+      });
+    },
+    onClick(col, data) {
+      this.dialogShow = true;
+      this.dialogTitle="曲线偏差率排行";
+      const date = new Date();
+      let year = date.getFullYear();
+      let month = date.getMonth() + 1;
+      let pdate = this.$parent.date.split("-");
+      if(pdate && pdate.length>1){
+        year = pdate[0];
+        month = pdate[1];
+      }
+
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl:"/leaderboard/curveMonthchatAjax",
+        data: {
+          wtId  : data.fj,
+          month : month,
+          type  :"zybz",
+          year  : year
+        },
+        success (res) {
+          if (res.code === 200) {
+            const linedata1 = [];
+            const linedata2 = [];
+            
+            res.data.datas.forEach((item, index) => {
+              linedata1.push(item['value2']);
+              linedata2.push(item['value3']);
+            });
+            
+            that.dialogShow = true;
+            that.dialogTitle="曲线偏差率排行";
+            that.initChart(linedata1,linedata2);
+          }
+        }
+      });
+    },
+    initChart(data1,data2){
+      let myChart = echarts.init(document.getElementById('chartDiv'));
+      let option = {
+        "color": [
+            "#05bb4c",
+            "#4b55ae",
+        ],
+        tooltip: {
+            trigger: 'axis'
+        },
+        "legend": {
+            "show": true,
+            "data": [
+                "最优功率",
+                "保证功率",
+            ],
+            "right": 56,
+            "icon": "circle",
+            "itemWidth": 6,
+            "inactiveColor": "#606769",
+            "textStyle": {
+                "color": "#B3BDC0",
+                "fontSize": 12
+            }
+        },
+        "grid": {
+            "top": 32,
+            "left": 40,
+            "right": 40,
+            "bottom": 24
+        },
+        "xAxis": [
+            {
+                "type": "category",
+                "boundaryGap": false,
+                "axisLabel": {
+                    "formatter": "{value}",
+                    "fontSize": 9.35925925925926,
+                    "textStyle": {
+                        "color": "#606769"
+                    }
+                },
+                "axisLine": {
+                    "show": false
+                },
+                "data": ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25"]
+            }
+        ],
+        "yAxis": [
+            {
+                "type": "value",
+                "name": "(W)",
+                "axisLabel": {
+                    "formatter": "{value}",
+                    "fontSize": 9.35925925925926
+                },
+                "axisLine": {
+                    "show": false
+                },
+                "splitLine": {
+                    "show": true,
+                    "lineStyle": {
+                        "color": "#606769",
+                        "type": "dashed"
+                    }
+                }
+            }
+        ],
+        "series": [
+            {
+                "name": "最优功率",
+                "type": "line",
+                "smooth": true,
+                "showSymbol": false,
+                "zlevel": 0,
+                "lineStyle": {
+                    "normal": {
+                        "color": "#05bb4c",
+                        "width": 1
+                    },
+                    "emphasis": {
+                        "color": "#05bb4c"
+                    }
+                },
+                "areaStyle": {
+                    "normal": {
+                        "color": {
+                            "colorStops": [
+                                {
+                                    "offset": 0,
+                                    "color": "rgba(5,187,76,0.3)"
+                                },
+                                {
+                                    "offset": 1,
+                                    "color": "rgba(5,187,76,0.1)"
+                                }
+                            ],
+                            "x": 0,
+                            "y": 0,
+                            "x2": 0,
+                            "y2": 1,
+                            "type": "linear",
+                            "global": false
+                        },
+                        "shadowColor": "rgba(5,187,76,0.1)",
+                        "shadowBlur": 10
+                    },
+                    "emphasis": {
+                        "color": {
+                            "colorStops": [
+                                {
+                                    "offset": 0,
+                                    "color": "rgba(5,187,76,0.3)"
+                                },
+                                {
+                                    "offset": 1,
+                                    "color": "rgba(5,187,76,0.1)"
+                                }
+                            ],
+                            "x": 0,
+                            "y": 0,
+                            "x2": 0,
+                            "y2": 1,
+                            "type": "linear",
+                            "global": false
+                        },
+                        "shadowColor": "rgba(5,187,76,0.1)",
+                        "shadowBlur": 10
+                    }
+                },
+
+                "yAxisIndex": 0,
+                "data": data1
+            },
+            {
+                "name": "保证功率",
+                "type": "line",
+                "smooth": true,
+                "showSymbol": false,
+                "zlevel": 2,
+                "lineStyle": {
+                    "normal": {
+                        "color": "#606769",
+                        "width": 1
+                    },
+                    "emphasis": {
+                        "color": "#fa8c16"
+                    }
+                },
+                "areaStyle": {
+                    "normal": {
+                        "color": "transparent",
+                        "shadowColor": "rgba(250,140,22,0.1)",
+                        "shadowBlur": 10
+                    },
+                    "emphasis": {
+                        "color": {
+                            "colorStops": [
+                                {
+                                    "offset": 0,
+                                    "color": "rgba(250,140,22,0.3)"
+                                },
+                                {
+                                    "offset": 1,
+                                    "color": "rgba(250,140,22,0.1)"
+                                }
+                            ],
+                            "x": 0,
+                            "y": 0,
+                            "x2": 0,
+                            "y2": 1,
+                            "type": "linear",
+                            "global": false
+                        },
+                        "shadowColor": "rgba(250,140,22,0.1)",
+                        "shadowBlur": 10
+                    }
+                },
+
+                "yAxisIndex": 0,
+                "data": data2
+            }
+        ]
+      };
+      myChart.clear();
+      myChart && myChart && myChart.setOption(option);
+      this.resize = function() {
+        myChart.resize();
+      };
+      window.addEventListener("resize", this.resize);
+      myChart.resize();
+    },
+    onSort(col) {
+      if (col.sortable == true) {
+        this.sortCol = col.field;
+        switch (this.sortType) {
+          case "":
+            this.sortType = "DESC";
+            break;
+          case "DESC":
+            this.sortType = "ASC";
+            break;
+          case "ASC":
+            this.sortType = "";
+            break;
+        }
+      }
+    },
+    template(col, data) {
+      if (!col.template) return data;
+      else return col.template(data);
+    },
+    hover(row, col) {
+      if (this.showHover) {
+        this.hoverRow = row;
+        if (this.showColHover) this.hoverCol = col;
+      }
+    },
+    leave() {
+      this.hoverRow = -1;
+      this.hoverCol = -1;
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$emit("onPagging", {
+        pageIndex: this.currentPage,
+        pageSize: this.pageSize,
+        start: this.startRow,
+        end: this.endRow,
+      });
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {},
+  updated() {},
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 1000px;
+  height: 500px;
+}
+</style>

src/router/index.js

@@ -471,7 +471,13 @@ const routes = [{
         name: 'xqjsl',
         component: () =>
             import ('../views/Decision/slgl/xqjsl.vue')
-    }
+    },
+      // 曲线排行榜
+  {
+    path:'/qxpclfx',
+    name:'qxpclfx',
+    component:()=> import('../views/nxfx/qxpclfx.vue')
+  }
 ]
 const router = createRouter({
     history: createWebHashHistory(),

src/views/layout/Menu.vue

@@ -137,7 +137,7 @@ export default {
                 {
                   text: "曲线偏差率分析",
                   icon: "svg-wind-site",
-                  path: "/nxfx4",
+                  path: "/qxpclfx",
                 },
                 {
                   text: "单机性能分析",

src/views/nxfx/qxpclfx.vue

@@ -0,0 +1,324 @@
+<template>
+  <div>
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div
+          class="newspan"
+          v-for="(item, index) of optionData"
+          :key="index"
+          :class="{ active: cur == index }"
+          @click="handleOpen(item, index)"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </div>
+    <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="value1"
+              clearable
+              placeholder="请选择"
+              popper-class="select"
+            >
+              <el-option
+                v-for="item in ChangZhan"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="query-item" v-if="shows == true">
+          <div class="lable">年月：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="date"
+              type="month"
+              placeholder="选择年月"
+              popper-class="date-select"
+              value-format="YYYY-MM"
+            >
+            </el-date-picker>
+          </div>
+        </div>
+        <div class="query-item" v-else>
+          <div class="lable">日期：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="date2"
+              type="date"
+              placeholder="选择日期"
+              popper-class="date-select"
+              value-format="YYYY-MM-DD"
+            >
+            </el-date-picker>
+          </div>
+        </div>
+        <div class="query-actions">
+          <button class="btn green" @click="handleSubmit">查询</button>
+        </div>
+      </div>
+    </div>
+    <div class="table-box">
+      <div class="title">{{ showTitle }}</div>
+      <ComTable
+        :data="tableData"
+        :pageSize="20"
+        height="73vh"
+        v-loading="tableLoading"
+        element-loading-text="拼命加载中.."
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      ></ComTable>
+    </div>
+  </div>
+</template>
+<script>
+import ComTable from "@/components/coms/table/table-qc.vue";
+import thermometerVue from "../../components/chart/bar/thermometer.vue";
+export default {
+  name: "qxpclfx",
+  components: { ComTable },
+  data() {
+    return {
+      cur: 0,
+      optionData: ["月曲线偏差率排行榜", "日曲线偏差率排行榜"],
+      ChangZhan: [],
+      value1: "XS_FDC",
+      date: "",
+      date2: "",
+      shows: true,
+      showTitle: "月曲线偏差率排行榜",
+      tableLoading: true,
+      tableData: {
+        column: [
+          {
+            name: "风机",
+            field: "fj",
+            is_num: false,
+            is_light: false,
+            sortable: thermometerVue
+          },
+          {
+            name: "实际 / 保证（%）",
+            field: "sjbz",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "实际 / 最优（%）",
+            field: "sjzy",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "最优 / 保证（%）",
+            field: "zybz",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "环比",
+            field: "hb",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "同比",
+            field: "tb",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "比标杆风机",
+            field: "bbgfj",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          }
+        ],
+        data: []
+      },
+      tableId: ""
+    };
+  },
+  created() {
+    this.ChangZhanVal();
+    this.date = this.getDate(1);
+    this.date2 = this.getDate(2);
+    this.getTable(this.date);
+  },
+  methods: {
+    // 获取表格数据
+    getTable(date) {
+      let that = this;
+      that.tableLoading = true;
+      that.API.requestData({
+        timeout:60000,
+        method: "POST",
+        subUrl: "/leaderboard/curvefittingmainList",
+        data: {
+          isAsc: "asc",
+          wpId: that.value1,
+          recorddate: date
+        },
+        success(res) {
+          that.tableLoading = false;
+          if (res.code === 200) {
+            // that.tableData.data = res.data
+            var data = [];
+            res.data.forEach((item, index) => {
+              data[index] = {
+                fj: item.windturbineid,
+                sjbz: item.deviationrate2,
+                sjzy: item.deviationrate1,
+                zybz: item.deviationrate3,
+                hb: item.monthdeviationrate,
+                tb: item.yeardeviationrate,
+                bbgfj: item.standarddeviationrate
+              };
+            });
+            that.tableData.data = data;
+          }
+        },
+        Error(res) {
+          console.log("tag", res);
+        }
+      });
+    },
+    //   tab
+    handleOpen(vl, index) {
+      this.$nextTick(() => {
+        this.cur = index;
+        this.showTitle = vl;
+        if (index == 0) {
+          this.getDate(1);
+          this.shows = true;
+        } else {
+          this.getDate(2);
+          this.shows = false;
+        }
+      });
+    },
+    // 场站
+    ChangZhanVal() {
+      var that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://10.155.32.4:9001/",
+        subUrl: "benchmarking/wplist",
+        success(res) {
+          that.ChangZhan = res.data;
+          that.value1 = res.data[0].id;
+        }
+      });
+    },
+    // 查询
+    handleSubmit() {
+      if (this.shows == true) {
+        // alert(this.date);
+        this.getTable(this.date);
+      } else {
+        // alert(this.date2);
+        this.getTable(this.date2);
+      }
+    },
+    // 获取日期
+    getDate(vl) {
+      //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
+      var date = new Date();
+      var year = date.getFullYear(),
+        month = date.getMonth() + 1,
+        day = date.getDate() - 1;
+      month >= 1 && month <= 9 ? (month = "0" + month) : "";
+      day >= 0 && day <= 9 ? (day = "0" + day) : "";
+      var begin = year + "-" + month;
+      var end = year + "-" + month + "-" + day;
+      if (vl == 1) {
+        return begin;
+      } else if (vl == 2) {
+        return end;
+      }
+    },
+  }
+};
+</script>
+<style scoped>
+.newsDiv {
+  color: rgba(255, 255, 255, 0.75);
+  background-color: rgba(255, 255, 255, 0.1);
+  margin-bottom: 8px;
+  line-height: 3.4259vh;
+  padding: 0 15px;
+}
+.newspan {
+  line-height: 30px;
+  cursor: pointer;
+  padding: 0 1vw;
+  margin: 0 2px;
+  color: #9ca5a8;
+  transition: color 0.2s ease-in-out;
+  position: relative;
+}
+.newspan:hover {
+  background: linear-gradient(
+    to top,
+    rgba(5, 187, 76, 0.5),
+    rgba(5, 187, 76, 0)
+  );
+  color: white;
+  position: relative;
+}
+.newspan:hover::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 0.463vh;
+  border: 0.093vh solid #05bb4c;
+  border-top: 0;
+  left: 0;
+  bottom: 0;
+  box-sizing: border-box;
+}
+.active {
+  background: linear-gradient(
+    to top,
+    rgba(5, 187, 76, 0.5),
+    rgba(5, 187, 76, 0)
+  );
+  color: white;
+  position: relative;
+}
+.active::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 0.463vh;
+  border: 0.093vh solid #05bb4c;
+  border-top: 0;
+  left: 0;
+  bottom: 0;
+  box-sizing: border-box;
+}
+.title {
+  background: rgba(255, 255, 255, 0.1);
+  margin-bottom: 8px;
+  padding: 1vh;
+}
+</style>