fd_dwgz_zhyw/src/views/HealthControl/HealthDay.vue

<template>
  <div class="decision-page-2">
    <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="value2"
              @change="MoKuaiChange(value2)"
              multiple
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in MoKuai"
                :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"
              @change="ChangZhanChange(value1)"
              multiple
              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">
          <div class="lable">日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="value4"
              @change="BeginChange(value4)"
              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" @click="dbfx">对比</button>
      </div>
    </div>

    <div class="mg-b-16">
      <div class="project-table">
        <Table :data="tableData" :canScroll="false" ref="curRef"></Table>
      </div>
    </div>
    <el-dialog
      title="对标排名分析"
      v-model="dialogVisible"
      width="70%"
      top="10vh"
      custom-class="modal"
      :close-on-click-modal="false"
    >
      <dayinfo
        :radarValue="radarValue"
        :windNum="windNum"
        :windNum2="windNum2"
        :tabs="tabs"
        :analyisDialog="analyisDialog"
      />
    </el-dialog>
  </div>
</template>

<script>
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import Panel from "../../components/coms/panel/panel.vue";
import Table from "../../components/coms/table/table.vue";
import Dayinfo from "./dayinfo.vue";
export default {
  components: {
    Panel,
    Table,
    SvgIcon,
    Dayinfo,
  },
  data() {
    let that = this;
    return {
      tableIdArr: [], //放checkbox的id数组
      tableId: [],
      checkLength: 0, //对标分析只能选择2个
      tableData: {
        column: [
          {
            name: "",
            field: "index",
            is_num: false,
            is_light: false,
          },
          {
            name: "",
            field: "check",
            is_num: false,
            is_light: false,
            template: () => {
              return "<input class='check curCheckBox' type='CheckBox' />";
            },
            click: function (event, data) {
              var dataId = that.tableIdArr[data.index - 1];
              if (event.target.checked == false && that.checkLength <= 2) {
                that.tableId.forEach((item, i) => {
                  if (item == dataId) {
                    that.tableId.splice(i, 1);
                  }
                });
                that.checkLength--;
              } else if (event.target.checked && that.checkLength < 2) {
                that.tableId.push(dataId);
                that.checkLength++;
              } else if (that.checkLength == 2) {
                event.target.checked = false;
              }
            },
          },
          {
            name: "风机编号",
            field: "name",
            is_num: false,
            is_light: false,
          },
          {
            name: "等级",
            field: "dj",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "综合排名",
            field: "zhpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "发电量",
            field: "fdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "理论发电量",
            field: "llfdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "平均风速",
            field: "pjfs",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "平均功率",
            field: "pjgl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "故障损失电量",
            field: "gzssdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "限电损失电量",
            field: "xdssdl",
            is_num: false,
            is_light: true,
            sortable: true,
          },
          {
            name: "检修损失电量",
            field: "whssdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "性能损失电量",
            field: "xnssdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "利用小时数",
            field: "lyxss",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "拟合优度",
            field: "nhyd",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "设备可利用率",
            field: "sbklyl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "等效可用系数",
            field: "dxkyxs",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "有效风时数",
            field: "yxfss",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "平均切入风速",
            field: "pjqrfs",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "静风频率",
            field: "jfpl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "功率一致性系数",
            field: "glyzxxs",
            is_num: false,
            is_light: false,
            sortable: true,
          },
        ],
        data: [],
      },
      ChangZhan: [], //场站
      MoKuai: [], //项目
      value1: [],
      value2: [],
      value3: "",
      dialogVisible: false,
      radarValue: [],
      windNum: "dd",
      windNum2: "dd",
      tabs: [],
      analyisDialog: [],
      ajaxData: [],
    };
  },
  created() {
    this.ChangZhanVal();
    this.value3 = this.getTime(1);
    this.AjaxCommon();
    this.MoKuaiVal();
  },
  methods: {
    MoKuaiVal(val) {
      var that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "10.155.32.4:8034",
        subUrl: "evaluation/modelMainList",
        success(res) {
          that.MoKuai = res.data;
        },
      });
    },
    MoKuaiChange(val) {
      this.value2 = val;
      this.value3 = [];
      this.AjaxCommon();
      this.XianLuVal(val);
      this.clearDb();
    },
    ChangZhanVal() {
      var that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "10.155.32.4:8034",
        subUrl: "evaluation/wplist",
        success(res) {
          that.ChangZhan = res.data;
        },
      });
    },
    ChangZhanChange(val) {
      this.value1 = val;
      this.value2 = [];
      this.value3 = [];
      this.AjaxCommon();
      this.MoKuaiVal(val);
      this.clearDb();
    },
    BeginChange(val) {
      this.value4 = val;
      this.AjaxCommon();
      this.clearDb();
    },
    getTime(val) {
      //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
      var date = new Date();
      var year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
      month >= 1 && month <= 9 ? (month = "0" + month) : "";
      day >= 0 && day <= 9 ? (day = "0" + day) : "";
      var begin = year + "-" + month + "-01";
      var end = year + "-" + month + "-" + day;
      if (val == 1) {
        return begin;
      } else if (val == 2) {
        return end;
      }
    },
    AjaxCommon() {
      var that = this;
      that.API.requestData({
        //五项损失率
        method: "GET",
        baseURL: "10.155.32.4:8034",
        subUrl: "evaluation/wxssl",
        data: {
          wpids: that.value1,
          projectids: that.value2,
          lineids: that.value3,
          beginDate: that.value4,
          endDate: that.value5,
          target: "",
          sort: "",
        },
        success(res) {
          that.ajaxData = res.data;
          var dataTab = []; //表格
          res.data.forEach((item, index) => {
            that.tableIdArr.push(item.id);
            dataTab.push({
              //表格
              index: index + 1,
              name: item.name,
              dj: item.dj,
              zhpm: item.zhpm,
              fdl: item.fdl,
              llfdl: item.llfdl,
              pjfs: item.gzssdl,
              pjgl: item.pjgl,
              gzssdl: item.gzssdl,
              lyxss: item.lyxss,
              whssdl: item.whssdl,
              xnssdl: item.xnssdl,
              lyxss: item.lyxss,
              nhyd: item.nhyd,
              sbklyl: item.sbklyl,
              dxkyxs: item.dxkyxs,
              yxfss: item.yxfss,
              pjqrfs: item.pjqrfs,
              jfpl: item.jfpl,
              glyzxxs: item.glyzxxs,
              jxssl: item.jxssl,
              qflpm: item.qflpm,
              qfl: item.qfl,
              xnsslpm: item.xnsslpm,
              xnssl: item.xnssl,
              slsslpm: item.slsslpm,
              slssl: item.slssl,
              is_light: false,
            });
          });
          that.tableData.data = dataTab;
        },
      });
    },
    AjaxDbfx() {
      var that = this;
      var data = that.ajaxData;
      that.windNum = data[0].name;
      that.windNum2 = data[1].name;
      that.tabs = [
        {
          name: "发电量",
          windData1: data[0].fdl,
          windData2: data[1].fdl,
        },
        {
          name: "故障损失电量",
          windData1: data[0].gzssdl,
          windData2: data[1].gzssdl,
        },
        {
          name: "检修损失电量",
          windData1: data[0].jxssdl,
          windData2: data[1].jxssdl,
        },
        {
          name: "性能未达标损失电量",
          windData1: data[0].xnssdl,
          windData2: data[1].xnssdl,
        },
        {
          name: "受累损失电量",
          windData1: data[0].slssdl,
          windData2: data[1].slssdl,
        },
        {
          name: "风能利用率",
          windData1: data[0].fnlyl,
          windData2: data[1].fnlyl,
        },
        {
          name: "故障损失率",
          windData1: data[0].gzssl,
          windData2: data[1].gzssl,
        },
        {
          name: "检修损失率",
          windData1: data[0].jxssl,
          windData2: data[1].jxssl,
        },
        {
          name: "弃风率",
          windData1: data[0].qfl,
          windData2: data[1].qfl,
        },
        {
          name: "性能损失率",
          windData1: data[0].xnssl,
          windData2: data[1].xnssl,
        },
        {
          name: "受累损失率",
          windData1: data[0].slssl,
          windData2: data[1].slssl,
        },
      ];

      that.radarValue = [
        {
          indicator: [
            "风能利用率",
            "故障损失率",
            "检修损失率",
            "弃风率",
            "性能损失率",
            "受累损失率",
          ],
          data: [
            {
              value: [
                data[0].fnlylpm,
                data[0].gzsslpm,
                data[0].jxsslpm,
                data[0].qflpm,
                data[0].xnsslpm,
                data[0].slsslpm,
              ],
            },
            {
              value: [
                data[1].fnlylpm,
                data[1].gzsslpm,
                data[1].jxsslpm,
                data[1].qflpm,
                data[1].xnsslpm,
                data[1].slsslpm,
              ],
            },
          ],
        },
      ];

      var analyis = [],
        gzssdl = [],
        jxssdl = [],
        xnssdl = [],
        xdssdl = [],
        slssdl = [];
      data.forEach((item, index) => {
        gzssdl.push({
          text: item.name,
          value: item.gzssdl,
        });
        jxssdl.push({
          text: item.name,
          value: item.jxssdl,
        });
        xnssdl.push({
          text: item.name,
          value: item.xnssdl,
        });
        xdssdl.push({
          text: item.name,
          value: item.xdssdl,
        });
        slssdl.push({
          text: item.name,
          value: item.slssdl,
        });
      });
      analyis.push(
        {
          title: "故障损失电量",
          yAxisIndex: 0,
          value: gzssdl,
        },
        {
          title: "检修损失电量",
          yAxisIndex: 0,
          value: jxssdl,
        },
        {
          title: "性能损失电量",
          yAxisIndex: 0,
          value: xnssdl,
        },
        {
          title: "限电损失电量",
          yAxisIndex: 0,
          value: xdssdl,
        },
        {
          title: "受累损失电量",
          yAxisIndex: 0,
          value: slssdl,
        }
      );
      that.analyisDialog = analyis;
    },
    tooltip(param, callback) {
      var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];

      var result = param[0].axisValue;
      param.forEach((value, index) => {
        result +=
          "<br />" +
          `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
          value.seriesName +
          "：" +
          value.value;
      });
      callback(result);
      return true;
    },
    dbfx() {
      var that = this;
      if (that.tableId.length == 2) {
        that.dialogVisible = true;
        this.AjaxDbfx();
        this.clearDb();
      }
    },
    clearDb() {
      //清空对标状态
      this.$refs.curRef.clearCheckBox();
      this.tableId = [];
      this.checkLength = 0;
    },
  },
};
</script>

<style lang="less">
.decision-page-2 {
  .content .project-table {
    tbody {
      height: calc(100vh - 24.5vh);
    }
  }

  .project-table {
    overflow: auto;

    tbody {
      height: 279px;
    }

    th,
    td {
      color: #b2bdc0;

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

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

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