fd_dwgz_zhyw/src/views/HealthControl/assess/assessindex.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"
        :pageable="false"
        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>
    <el-dialog
      :title="'历史数据查询>>' + hisDialogTitle"
      v-model="hisDialogVisible"
      width="70%"
      top="10vh"
      custom-class="modal"
    >
      <gradeHistory :option="hisOption" ref="gradeHistory" />
    </el-dialog>
  </div>
</template>
<script>
import ComTable from "@/components/coms/table/table-unpage.vue";
import Dayinfo from "../dayinfo.vue";
import GradeHistory from "../gradeHistory.vue";
import api1 from "@api/economic/index.js";
import api from "@api/wisdomOverhaul/grade/index.js";
import { registerLoading } from "echarts";
export default {
  name: "gradeassessment",
  components: { ComTable, Dayinfo, GradeHistory },
  data() {
    let that = this;
    return {
      cur: 0,
      optionData: [
        "风机日信息量化评级管理",
        "风机月信息量化评级管理",
        "风机年信息量化评级管理",
      ],
      dialogTitle: "日信息对比",
      dialogVisible: false,
      hisDialogVisible: false,
      hisDialogTitle: "",
      ChangZhan: [],
      value1: "CL_FDC",
      date: "",
      shows: "d",
      showTitle: "风机日信息量化评级管理",
      tableLoading: true,
      dataIds: new Set(),
      dialogData1: [],
      dialogData2: [],
      hisOption: {},
      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 "<el-button type='text' style='cursor: pointer;' value='xq'>详情</el-button>&nbsp;<el-button type='text' style='cursor: pointer;' value='ls'>历史</el-button>";
          //   },
          //   click: function (event, data) {
          //     if ("xq" == event.target.getAttribute("value")) {
          //       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;
          //     }
          //     if ("ls" == event.target.getAttribute("value")) {
          //       that.hisOption["shows"] = that.shows;
          //       that.hisOption["date"] = that.date;
          //       that.hisOption["windturbineid"] = data.windturbineid;
          //       that.hisDialogTitle = data.windturbineid;
          //       that.hisDialogVisible = true;
          //       that.$refs.gradeHistory.getTable();
          //     }
          //   },
          // },
        ],
        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: "",
        wpId: this.value1,
        orderby: "",
      };
      if ("d" == this.shows) {
        data["recorddate"] = date;
        data["type"] = 1;
      }
      if ("m" == this.shows) {
        data["recorddate"] = date;
        data["type"] = 2;
      }
      if ("y" == this.shows) {
        data["recorddate"] = date;
        data["type"] = 3;
      }
      this.tableLoading = true;

      api.levelAssessmentList(data).then((res) => {
        this.tableLoading = false;
        if (res.code === 200) {
          var data = [];
          this.tableData.data = res.data;
        }
      });
    },
    //   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 = "年信息对比";
        }
        this.getTable(this.date);
      });
    },
    // 场站
    ChangZhanVal() {
      api1.getWpList({ type: "-1" }).then((res) => {
        this.ChangZhan = res.data?.data || [];
        this.value1 = res.data?.data?.[0]?.id || "";
      });
    },
    // 查询
    handleSubmit() {
      this.clearCheckBox();
      this.getTable(this.date);
    },
    // 日信息对比
    contrast() {
      if (this.dataIds.size == 2) {
        this.dialogVisible = true;
        const tmpArr = Array.from(this.dataIds);
        const data = {
          gaid1: tmpArr[0],
          gaid2: tmpArr[1],
        };

        api.levelAssessmentComparison(data).then((res) => {
          this.dialogData1 = res.data.data;
          // 图表
          let index = 0;
          let data1 = [];
          let data2 = [];
          for (const key in res.data.charts) {
            switch (index) {
              case 0:
                data1 = this.getChartData(key, res.data.charts);
                index++;
                break;
              case 1:
                data2 = this.getChartData(key, res.data.charts);
                break;
            }
          }
          const chartData = [
            {
              indicator: [
                "平均切入风速",
                "性能损失电量",
                "拟合优度",
                "功率一致性系数",
                "利用小时",
                "设备可利用率",
                "等效可利用系数",
                "有效风时数",
                "平均风速",
                "静风频率",
              ],
              data: [],
            },
          ];
          if (data1) {
            chartData[0].data.push(data1);
          }
          if (data2) {
            chartData[0].data.push(data2);
          }
          this.dialogData2 = chartData;
        });
      }
      this.clearCheckBox();
    },
    getChartData(key, data) {
      const chartData = {};
      const rowMap = {};
      let resData = data[key];
      resData.forEach(function (rowData, index) {
        rowMap[rowData["target"]] = rowData["data"];
      });
      chartData["name"] = key;
      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>