hb_sis_zhfx/src/views/HealthControl/assess/selfEvaluate.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="modelName"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in modelNameArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </div>
        </div>
        <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 curTableBox">
      <div class="title">{{ showTitle }}</div>
      <ComTable
        class="curTableStyle"
        ref="curRef"
        :data="tableData"
        :pageSize="20"
        :pageable="false"
        height="70vh"
        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";

export default {
  name: "gradeassessment",
  components: { ComTable, Dayinfo, GradeHistory },
  data() {
    let that = this;
    return {
      cur: 0,
      optionData: [
        "风机日信息量化评级管理",
        "风机月信息量化评级管理",
        "风机年信息量化评级管理",
      ],
      dialogTitle: "日信息对比",
      dialogVisible: false,
      hisDialogVisible: false,
      hisDialogTitle: "",
      ChangZhan: [],
      modelNameArray: [],
      value1: "MHS_FDC",
      modelName: "",
      date: "",
      shows: "d",
      showTitle: "风机日信息量化评级管理",
      tableLoading: true,
      dataIds: new Set(),
      dialogData1: [],
      dialogData2: [],
      hisOption: {},
      tableData: {},
      tableId: "",
      wt1: "",
      wt2: "",
    };
  },
  created() {
    this.date = this.getDate(0);

    let p1 = new Promise((res, rej) => {
      this.ChangZhanVal(res);
    });
    let p2 = new Promise((res, rej) => {
      this.getModelNameArray(res);
    });

    Promise.all([p1, p2]).then(() => {
      this.getTable(this.date);
    });
  },
  methods: {
    clearCheckBox() {
      this.$refs.curRef.clearCheckBox();
      this.dataIds = new Set();
    },
    // 获取表格数据
    getTable(date) {
      let that = this;
      let subUrl = "";
      const data = {
        tid: that.modelName,
        wpid: that.value1,
      };

      if (that.dataIds.size === 2) {
        const tmpArr = Array.from(that.dataIds);
        data.wt1 = tmpArr[0];
        data.wt2 = tmpArr[1];
      }

      if ("d" == that.shows) {
        subUrl = "evaluation/dayilyList";
        data["date"] = date;
      }
      if ("m" == that.shows) {
        subUrl = "evaluation/monthlyList";
        const dateStr = date.split("-");
        if (dateStr.length > 1) {
          data["date"] = dateStr[0] + "-" + dateStr[1];
        }
      }
      if ("y" == that.shows) {
        subUrl = "evaluation/yearlyList";
        data["date"] = date.split("-")[0];
      }
      that.tableLoading = true;
      that.API.requestData({
        timeout: 60000,
        method: "GET",
        baseURL: "http://10.155.32.4:8034/",
        subUrl: subUrl,
        data: data,
        success(res) {
          that.tableLoading = false;
          if (res.data.length) {
            const tableTargetName = {
              target001: "平均切入风速",
              target002: "平均达到额定风速",
              target003: "平均大风切出风速",
              target004: "功率一致性系数",
              target005: "曲线偏差率",
              target006: "对风偏差率",
              target007: "拟合优度",
              target008: "性能损失率",
              target009: "利用小时数",
              target010: "设备可利用率",
              target011: "等效可利用系数",
              target012: "故障损失率",
              target013: "平均无故障间隔时间",
              target014: "平均故障间隔时间",
              target015: "平均风速",
              target016: "有效风时数",
              target017: "静风频率",
            };

            if (data.wt1 && data.wt2) {
              that.dialogData1 = [
                that.rinse(res.data[0]),
                that.rinse(res.data[1]),
              ];
              const data1 = res.data[0];
              const data2 = res.data[1];
              let chartData = [
                {
                  indicator: [],
                  data: [],
                },
              ];

              let ele = res.data[0];

              for (let key in ele) {
                if (key.indexOf("target") !== -1) {
                  chartData[0].indicator.push(tableTargetName[key]);
                }
              }

              res.data.forEach((ele) => {
                ele.date = new Date(ele.date).formatDate("yyyy-MM-dd hh:mm:ss");
              });

              if (data1) {
                chartData[0].data.push(that.getChartData(data1));
              }
              if (data2) {
                chartData[0].data.push(that.getChartData(data2));
              }
              that.dialogData2 = chartData;
            } else {
              let tableData = {
                column: [
                  {
                    name: "",
                    field: "fj",
                    is_num: false,
                    is_light: false,
                    sortable: false,
                    template: () => {
                      return "<input class='check curCheckBox checkItem' type='CheckBox'/>";
                    },
                    click(event, data) {
                      if (event.target.checked == false) {
                        that.dataIds.delete(data.wtid);
                      }
                      if (event.target.checked) {
                        if (that.dataIds.size < 2) {
                          that.dataIds.add(data.wtid);
                        } else {
                          event.target.checked = false;
                        }
                      }
                    },
                  },
                  {
                    name: "风机",
                    field: "wtid",
                    is_num: false,
                    is_light: false,
                    sortable: true,
                  },
                  {
                    name: "日期",
                    field: "date",
                    is_num: false,
                    is_light: false,
                    sortable: true,
                  },
                  {
                    name: "评级",
                    field: "grade",
                    is_num: false,
                    is_light: false,
                    sortable: true,
                    width: "100px",
                  },
                  {
                    name: "排名",
                    field: "ranking",
                    is_num: true,
                    is_light: false,
                    sortable: true,
                  },
                ],
                data: [],
              };

              res.data.forEach((ele) => {
                ele.date = new Date(ele.date).formatDate("yyyy-MM-dd hh:mm:ss");
                for (let key in ele) {
                  if (key.indexOf("target") !== -1) {
                    ele["copyValue"] = ele[key]["value"];
                  }
                }
              });

              const itemTemp = res.data[0];

              for (let key in itemTemp) {
                if (key.indexOf("target") !== -1) {
                  tableData.column.push({
                    name: tableTargetName[key],
                    field: "copyValue",
                    is_num: true,
                    is_light: false,
                    sortable: true,
                  });
                }
              }
              tableData.data = res.data;
              that.tableData = tableData;
            }
          }
        },
        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(r) {
      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;
          r("OK");
        },
      });
    },

    // 模型名称
    getModelNameArray(r) {
      var that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.4:8034/",
        subUrl: "evaluation/modelMainList",
        data: {
          name: "",
        },
        success(res) {
          that.modelNameArray = res.data;
          that.modelName = res.data[0].id;
          r("OK");
        },
      });
    },

    // 查询
    handleSubmit() {
      this.clearCheckBox();
      this.getTable(this.date);
    },
    // 日信息对比
    contrast() {
      var that = this;
      if (that.dataIds.size == 2) {
        this.getTable(this.date);
        that.dialogVisible = true;
      }
      this.clearCheckBox();
    },
    getChartData(resData) {
      let chartData = {};
      chartData.name = resData.wtid;
      chartData.value = [];
      for (let key in resData) {
        if (key.indexOf("target") !== -1) {
          chartData.value.push(resData[key].value);
        }
      }
      return chartData;
    },
    rinse(res) {
      let rinseData = {};
      rinseData.windturbineid = res.wtid;
      rinseData.level = res.grade;
      rinseData.rank = res.ranking;

      if (res.target001) {
        rinseData.dayxfqr = res.target001.value;
        rinseData.monthxfqr = res.target001.ranking;
        rinseData.yearxfqr = res.target001.score;
      }

      if (res.target007) {
        rinseData.daynhyd = res.target007.value;
        rinseData.monthnhyd = res.target007.ranking;
        rinseData.yearnhyd = res.target007.score;
      }

      if (res.target004) {
        rinseData.dayglyzxxs = res.target004.value;
        rinseData.monthglyzxxs = res.target004.ranking;
        rinseData.yearglyzxxs = res.target004.score;
      }

      if (res.target009) {
        rinseData.daylyxs = res.target009.value;
        rinseData.monthlyxs = res.target009.ranking;
        rinseData.yearlyxs = res.target009.score;
      }

      if (res.target010) {
        rinseData.daysbklyl = res.target010.value;
        rinseData.monthsbklyl = res.target010.ranking;
        rinseData.yearsbklyl = res.target010.score;
      }

      if (res.target016) {
        rinseData.dayyxfss = res.target016.value;
        rinseData.monthyxfss = res.target016.ranking;
        rinseData.yearyxfss = res.target016.score;
      }

      if (res.target015) {
        rinseData.dayfs = res.target015.value;
        rinseData.monthfs = res.target015.ranking;
        rinseData.yearfs = res.target015.score;
      }

      if (res.target017) {
        rinseData.dayjfpl = res.target017.value;
        rinseData.monthjfpl = res.target017.ranking;
        rinseData.yearjfpl = res.target017.score;
      }

      return rinseData;
    },
    // 获取日期
    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>
<style lang="less">
.curTableBox {
  width: 100%;
  .curTableStyle {
    overflow-x: scroll;
  }
}
</style>