hb_sis_zhfx/src/views/Decision/Decision4.vue

<template>
  <div class="decision-page-4">
    <div class="query mg-b-8">
      <div class="query-items">
        <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 class="query-item">
          <div class="lable">结束日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="value5"
              @change="EndChange(value5)"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="选择日期"
              popper-class="date-select"
            >
            </el-date-picker>
            <div class="unit svg-icon svg-icon-gray">
              <svg-icon :svgid="''" />
            </div>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn" @click="dbfx">对标分析</button>
        </div>
      </div>
    </div>
    <toolbar-panel title="值际对标" :showLine="false"></toolbar-panel>
    <div class="mg-b-16">
      <div class="project-table">
        <Table :data="tableData" 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 MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import Panel from "../../components/coms/panel/panel.vue";
import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
import Table from "./table.vue";
import Dayinfo from "./dayinfo.vue";
export default {
  components: {
    Panel,
    Table,
    SvgIcon,
    MultipleBarChart,
    ToolbarPanel,
    Dayinfo,
  },
  data() {
    const that = this;
    return {
      tableIdArr: [], //放checkbox的id数组
      tableId: [],
      dbData: [],
      dialogVisible: false,
      analyisDialog: [],
      radarValue: [],
      windNum: "dd",
      windNum2: "dd",
      checkLength: 0,
      tabs: [],
      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 checkItem' type='CheckBox'/>";
            },
            click(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.dbData.splice(i, 1);
                  }
                });
                that.checkLength--;
              } else if (event.target.checked && that.checkLength < 2) {
                that.tableId.push(dataId);
                that.dbData.push(data);
                that.checkLength++;
              } else if (that.checkLength == 2) {
                event.target.checked = false;
              }
            },
          },
          {
            name: "值际",
            width: "200px",
            field: "dutyname",
            is_num: false,
            is_light: false,
          },
          {
            name: "理论发电量",
            field: "theoreticalgeneratity",
            is_num: false,
            is_light: false,
          },
          {
            name: "实际发电量",
            field: "generatity",
            is_num: false,
            is_light: false,
          },
          {
            name: "故障损失",
            field: "faultloss",
            is_num: false,
            is_light: false,
          },
          {
            name: "维护损失",
            field: "mainloss",
            is_num: false,
            is_light: false,
          },
          {
            name: "性能损失",
            field: "performanceloss",
            is_num: false,
            is_light: false,
          },
          {
            name: "限电损失",
            field: "rationingloss",
            is_num: false,
            is_light: false,
          },
          {
            name: "受累损失",
            field: "involvesloss",
            is_num: false,
            is_light: false,
          },
        ],
        data: [],
      },
      value4: "",
      value5: "",
    };
  },
  created() {
    this.value4 = this.getTime(1);
    this.value5 = this.getTime(2);
    this.AjaxCommon();
  },
  methods: {
    BeginChange(val) {
      this.value4 = val;
      this.AjaxCommon();
    },
    EndChange(val) {
      this.value5 = val;
      this.AjaxCommon();
    },
    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: "http://10.155.32.4:9001/",
        subUrl: "benchmarking/zjwxssl",
        data: {
          beginDate: that.value4,
          endDate: that.value5,
        },
        success(res) {
          var data = [];

          res.data.forEach((item, index) => {
            that.tableIdArr.push(index);
            data.push({
              index: index + 1,
              dutyname: item.dutyname,
              theoreticalgeneratity: item.theoreticalgeneratity,
              generatity: item.generatity,
              faultloss: item.faultloss,
              mainloss: item.mainloss,
              performanceloss: item.performanceloss,
              rationingloss: item.rationingloss,
              involvesloss: item.involvesloss,
              is_light: false,
            });
          });
          that.tableData.data = data;
        },
      });
    },
    dbfx() {
      var that = this;
      if (that.tableId.length == 2) {
        that.dialogVisible = true;
        this.AjaxDbfx();
        this.clearDb();
      }
    },
    clearDb() {
      //清空对标状态
      this.$refs.curRef.clearCheckBox();
      this.tableId = [];
      this.dbData = [];
      this.checkLength = 0;
    },
    AjaxDbfx() {
      var that = this;
      var data = that.dbData;
      that.windNum = data[0].name;
      that.windNum2 = data[1].name;
      that.tabs = [
        {
          name: "理论发电量",
          windData1: data[0].theoreticalgeneratity,
          windData2: data[1].theoreticalgeneratity,
        },
        {
          name: "实际发电量",
          windData1: data[0].generatity,
          windData2: data[1].generatity,
        },
        {
          name: "故障损失",
          windData1: data[0].faultloss,
          windData2: data[1].faultloss,
        },
        {
          name: "维护损失",
          windData1: data[0].mainloss,
          windData2: data[1].mainloss,
        },
        {
          name: "性能损失",
          windData1: data[0].performanceloss,
          windData2: data[1].performanceloss,
        },
        {
          name: "限电损失",
          windData1: data[0].rationingloss,
          windData2: data[1].rationingloss,
        },
        {
          name: "受累损失",
          windData1: data[0].involvesloss,
          windData2: data[1].involvesloss,
        },
      ];

      that.radarValue = [
        {
          indicator: [
            "理论发电量",
            "实际发电量",
            "故障损失",
            "维护损失",
            "性能损失",
            "限电损失",
            "受累损失",
          ],
          data: [
            {
              value: [
                data[0].theoreticalgeneratity,
                data[0].generatity,
                data[0].faultloss,
                data[0].mainloss,
                data[0].performanceloss,
                data[0].rationingloss,
                data[0].involvesloss,
              ],
            },
            {
              value: [
                data[1].theoreticalgeneratity,
                data[1].generatity,
                data[1].faultloss,
                data[1].mainloss,
                data[1].performanceloss,
                data[1].rationingloss,
                data[1].involvesloss,
              ],
            },
          ],
        },
      ];

      let analyis = [];
      let theoreticalgeneratity = [];
      let generatity = [];
      let faultloss = [];
      let mainloss = [];
      let performanceloss = [];
      let rationingloss = [];
      let involvesloss = [];
      data.forEach((item, index) => {
        theoreticalgeneratity.push({
          text: item.dutyname,
          value: item.theoreticalgeneratity,
        });
        generatity.push({
          text: item.dutyname,
          value: item.generatity,
        });
        faultloss.push({
          text: item.dutyname,
          value: item.faultloss,
        });
        mainloss.push({
          text: item.dutyname,
          value: item.mainloss,
        });
        performanceloss.push({
          text: item.dutyname,
          value: item.performanceloss,
        });
        rationingloss.push({
          text: item.dutyname,
          value: item.rationingloss,
        });
        involvesloss.push({
          text: item.dutyname,
          value: item.involvesloss,
        });
      });

      analyis.push(
        {
          title: "理论发电量",
          yAxisIndex: 0,
          value: theoreticalgeneratity,
        },
        {
          title: "实际发电量",
          yAxisIndex: 0,
          value: generatity,
        },
        {
          title: "故障损失",
          yAxisIndex: 0,
          value: faultloss,
        },
        {
          title: "维护损失",
          yAxisIndex: 0,
          value: mainloss,
        },
        {
          title: "性能损失",
          yAxisIndex: 0,
          value: performanceloss,
        },
        {
          title: "限电损失",
          yAxisIndex: 0,
          value: rationingloss,
        },
        {
          title: "受累损失",
          yAxisIndex: 0,
          value: involvesloss,
        }
      );
      that.analyisDialog = analyis;
    },
  },
};
</script>

<style lang="less">
.decision-page-4 {
  .com-panel {
    .panel-title {
      color: @gray-l;
    }

    .tools {
      display: flex;

      .tool-block {
        display: flex;
        align-items: center;
        margin-left: 0.741vh;

        .legend {
          flex: auto;
          width: 0.741vh;
          height: 0.741vh;
          margin-right: 0.741vh;

          &.long {
            width: 2.963vh;
            height: 0.37vh;
          }
        }

        .legend-text {
          color: @gray-l;
          font-size: @fontsize-s;
        }
      }
    }
  }

  .project-table {
    overflow: auto;
    height: 90vh;
    tbody {
      // height: 100vh;
    }

    th,
    td {
      color: #b2bdc0;

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

      &:nth-child(2) {
        width: 50px;
      }
    }
  }
}
</style>