sis_zhfx/src/views/HealthControl/gradeassessment.vue

<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 == 'd'">
          <div class="lable">日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="date"
              type="date"
              placeholder="选择日期"
              popper-class="date-select"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </div>
        </div>
        <div class="query-item" v-if="shows == 'm'">
          <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-if="shows == 'y'">
          <div class="lable">年：</div>
          <div class="search-input">
            <el-date-picker
              v-model="date"
              type="year"
              placeholder="选择年"
              popper-class="date-select"
              value-format="YYYY"
            ></el-date-picker>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn green" @click="handleSubmit">查询</button>
          <button class="btn green" @click="contrast">对比</button>
        </div>
      </div>
    </div>
    <div class="table-box">
      <div class="title">{{ showTitle }}</div>
      <ComTable
        ref="curRef"
        :data="tableData"
        :pageSize="20"
        height="73vh"
        v-loading="tableLoading"
        element-loading-text="拼命加载中.."
        element-loading-background="rgba(0, 0, 0, 0.8)"
      ></ComTable>
    </div>
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal">
      <dayinfo :gridDatas="dialogData1" :chartDatas="dialogData2" />
    </el-dialog>
  </div>
</template>
<script>
import ComTable from "@/components/coms/table/table.vue";
import Dayinfo from "./dayinfo.vue";
export default {
  name: "gradeassessment",
  components: { ComTable, Dayinfo },
  data() {
    let that = this;
    return {
      cur: 0,
      optionData: [
        "风机日信息量化评级管理",
        "风机月信息量化评级管理",
        "风机年信息量化评级管理"
      ],
      dialogTitle: "日信息对比",
      dialogVisible: false,
      ChangZhan: [],
      value1: "XS_FDC",
      date: "",
      shows: "d",
      showTitle: "风机日信息量化评级管理",
      tableLoading: true,
      dataIds: new Set(),
      dialogData1: [],
      dialogData2: [],
      tableData: {
        column: [
          {
            name: "",
            field: "fj",
            is_num: false,
            is_light: false,
            sortable: false,
            template: () => {
              return "<input class='check curCheckBox checkItem' type='CheckBox'/>";
            },
            click: function(event, data) {
              if (event.target.checked == false) {
                that.dataIds.delete(data.id);
              }
              if (event.target.checked) {
                if (that.dataIds.size < 2) {
                  that.dataIds.add(data.id);
                } else {
                  event.target.checked = false;
                }
              }
            }
          },
          {
            name: "风机编号",
            field: "windturbineid",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "等級",
            field: "level",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },

          {
            name: "综合排名",
            field: "rank",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "发电量(kWh)",
            field: "dayfdl",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "理论发电量(kWh)",
            field: "dayllfdl",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "平均风速(m/s)",
            field: "dayfs",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "平均功率(kW)",
            field: "daygl",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "故障损失电量(kWh)",
            field: "daygzssdl",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "限电损失电量(kWh)",
            field: "dayxdssdl",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "维护损失电量(kWh)",
            field: "daywhssdl",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "性能损失电量(kWh)",
            field: "dayxnssdl",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "利用小时数(h)",
            field: "daylyxs",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "拟合优度(%)",
            field: "daynhyd",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "设备可利用率(%)",
            field: "daysbklyl",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "等效可用系数(%)",
            field: "daydxkyxs",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "有效风时数(h)",
            field: "dayyxfss",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "平均切入风速(m/s)",
            field: "dayxfqr",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "静风频率(%)",
            field: "dayjfpl",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "功率一致性系数(%)",
            field: "dayglyzxxs",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id"
          },
          {
            name: "操作",
            field: "sjbz",
            is_num: false,
            is_light: false,
            sortable: true,
            id: "id",
            template: () => {
              return "<a class='action'>详情</a>";
            },
            click: function(event, data) {
              that.dialogVisible = true;
              that.dialogData1 = [data];
              const service1 = {
                name: data.windturbineid,
                value: [
                  data["yearxfqr"],
                  data["yearxnssdl"],
                  data["yearnhyd"],
                  data["yearglyzxxs"],
                  data["yearlyxs"],
                  data["yearsbklyl"],
                  data["yeardxkyxs"],
                  data["yearyxfss"],
                  data["yearfs"],
                  data["yearjfpl"]
                ]
              };
              const chartData = [
                {
                  indicator: [
                    "平均切入风速",
                    "性能损失电量",
                    "拟合优度",
                    "功率一致性系数",
                    "利用小时",
                    "设备可利用率",
                    "等效可利用系数",
                    "有效风时数",
                    "平均风速",
                    "静风频率"
                  ],
                  data: [service1]
                }
              ];
              that.dialogData2 = chartData;
            }
          }
        ],
        data: []
      },
      tableId: ""
    };
  },
  created() {
    this.ChangZhanVal();
    this.date = this.getDate(0);
    this.getTable(this.date);
  },
  methods: {
    clearCheckBox() {
      this.$refs.curRef.clearCheckBox();
      this.dataIds = new Set();
    },
    // 获取表格数据
    getTable(date) {
      let that = this;
      let subUrl = "";
      const data = {
        isAsc: "asc",
        wpId: this.value1
      };
      if ("d" == this.shows) {
        subUrl = "/benchmarking/gadaylistByPage";
        data["recorddate"] = date;
      }
      if ("m" == this.shows) {
        subUrl = "/benchmarking/gamonthlistByPage";
        const dateStr = date.split("-");
        if (dateStr.length > 1) {
          data["year"] = dateStr[0];
          data["month"] = dateStr[1];
        }
      }
      if ("y" == this.shows) {
        subUrl = "/benchmarking/gayearlistByPage";
        data["year"] = date;
      }
      that.tableLoading = true;
      that.API.requestData({
        timeout: 60000,
        method: "POST",
        subUrl: subUrl,
        data: data,
        success(res) {
          that.tableLoading = false;
          if (res.code === 200) {
            var data = [];
            res.data.list.forEach((item, index) => {
              item["index"] = index;
              data[index] = item;
            });
            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.date = this.getDate(0);
          this.shows = "d";
          this.dialogTitle = "日信息对比";
        }
        if (index == 1) {
          this.date = this.getDate(1);
          this.shows = "m";
          this.dialogTitle = "月信息对比";
        }
        if (index == 2) {
          this.date = this.getDate(2);
          this.shows = "y";
          this.dialogTitle = "年信息对比";
        }
      });
    },
    // 场站
    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() {
      this.clearCheckBox();
      this.getTable(this.date);
    },
    // 日信息对比
    contrast() {
      var that = this;
      if (that.dataIds.size == 2) {
        that.dialogVisible = true;
        const tmpArr = Array.from(that.dataIds);
        const data = {
          gaid1: tmpArr[0],
          gaid2: tmpArr[1]
        };

        that.API.requestData({
          method: "GET",
          subUrl: "/benchmarking/wtinfo",
          data: data,
          success(res) {
            that.dialogData1 = [res.data.gaid1, res.data.gaid2];
          }
        });
        that.API.requestData({
          method: "GET",
          subUrl: "/benchmarking/wtchart",
          data: data,
          success(res) {
            const data1 = res.data.gaid1;
            const data2 = res.data.gaid2;
            const chartData = [
              {
                indicator: [
                  "平均切入风速",
                  "性能损失电量",
                  "拟合优度",
                  "功率一致性系数",
                  "利用小时",
                  "设备可利用率",
                  "等效可利用系数",
                  "有效风时数",
                  "平均风速",
                  "静风频率"
                ],
                data: []
              }
            ];
            if (data1) {
              chartData[0].data.push(that.getChartData(data1));
            }
            if (data2) {
              chartData[0].data.push(that.getChartData(data2));
            }
            that.dialogData2 = chartData;
          }
        });
      }
      this.clearCheckBox();
    },
    getChartData(resData) {
      const chartData = {};
      const rowMap = {};
      resData.forEach(function(rowData, index) {
        rowMap[rowData["name"]] = rowData["data1"];
      });
      chartData["name"] = resData[resData.length - 1]["name"];
      chartData["value"] = [];
      chartData["value"].push(rowMap["平均切入风速"]);
      chartData["value"].push(rowMap["性能损失电量"]);
      chartData["value"].push(rowMap["拟合优度"]);
      chartData["value"].push(rowMap["功率一致性系数"]);
      chartData["value"].push(rowMap["利用小时"]);
      chartData["value"].push(rowMap["设备可利用率"]);
      chartData["value"].push(rowMap["等效可利用系数"]);
      chartData["value"].push(rowMap["有效风时数"]);
      chartData["value"].push(rowMap["平均风速"]);
      chartData["value"].push(rowMap["静风频率"]);
      return chartData;
    },
    // 获取日期
    getDate(vl) {
      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) : "";
      if (vl == 0) {
        return year + "-" + month + "-" + day;
      }
      if (vl == 1) {
        return year + "-" + month;
      }
      if (vl == 2) {
        return year + "";
      }
    }
  }
};
</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>
<style lang="less">
.decision-page-2 {
  .content .project-table {
    tbody {
      height: calc(100vh - 24.5vh);
    }
  }
  .project-table {
    overflow: auto;
    tbody {
      height: 239px;
    }

    th,
    td {
      color: #b2bdc0;

      &:nth-child(1) {
        width: 50px;
      }

      &:nth-child(2) {
        width: 50px;
      }
    }
  }

  .action {
    text-decoration: underline;
    color: @green;
    cursor: pointer;
  }
}
</style>