jn_sis_zhfx/src/views/Decision/Decision1.vue

<template>
  <div class="decision-page-1">
    <div class="query-form">
      <!-- mg-b-8-->
      <div class="station">
        场站：
        <el-select
          size="mini"
          v-model="value1"
          @change="ChangZhanChange(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 class="station">
        项目：
        <el-select
          size="mini"
          v-model="value2"
          @change="XiangMuChange(value2)"
          multiple
          collapse-tags
          placeholder="请选择"
          popper-class="select"
        >
          <el-option
            v-for="item in XiangMu"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </div>
      <div class="station">
        线路：
        <el-select
          size="mini"
          v-model="value3"
          @change="XianLuChange(value3)"
          multiple
          collapse-tags
          placeholder="请选择"
          popper-class="select"
        >
          <el-option
            v-for="item in XianLu"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="dates">
        开始日期：
        <div class="search-input">
          <el-date-picker
            size="mini"
            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="dates">
        结束日期：
        <div class="search-input">
          <el-date-picker
            size="mini"
            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">
        <el-button round size="mini" class="btn green" @click="AjaxCommon()"
          >搜索</el-button
        >
        <el-button round size="mini" class="btn" @click="mxClick()"
          >明细信息</el-button
        >
        <el-button round size="mini" class="btn" @click="exportExcel()"
          >导出</el-button
        >
      </div>
    </div>
    <!-- <div class="actions">
      <el-button
        class="btn"
        :class="TypeClass == 1 ? 'green' : ''"
        @click="TypeClick(1)"
      >
        风场
      </el-button>
      <el-button
        class="btn"
        :class="TypeClass == 2 ? 'green' : ''"
        @click="TypeClick(2)"
      >
        项目
      </el-button>
      <el-button
        class="btn"
        :class="TypeClass == 3 ? 'green' : ''"
        @click="TypeClick(3)"
      >
        集电线路
      </el-button>
    </div> -->
    <div class="tabCut1">
      <div
        class="tabCut-item"
        @click="TypeClick(val.id)"
        :class="TypeClass === val.id ? 'green1' : ''"
        v-for="val in typeOptions"
        :key="val.id"
      >
        <span>{{ val.name }}</span>
      </div>
    </div>
    <!-- <div class="performance-title">
      <div class="left-title">风机绩效榜</div>
      <div class="right-title">项目列表</div>
    </div> -->
    <div class="performance" style="height: 90vh">
      <div class="economicTable" style="height: 86vh">
        <el-table
          :data="tableData.data"
          size="mini"
          :cell-style="{ padding: '6px' }"
          :row-style="{ height: '0px' }"
          cell-class-name="table_cell"
          stripe
          @header-click="onHeaderClick"
        >
          <el-table-column align="center" prop="" label="" width="900">
          </el-table-column>
          <el-table-column align="center" type="index"> </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            show-overflow-tooltip
            label="名称"
          >
          </el-table-column>
          <el-table-column align="center" prop="llfdl" label="理论发电量">
          </el-table-column>
          <el-table-column align="center" prop="sjfdl" label="实际发电量">
          </el-table-column>
          <el-table-column
            align="center"
            prop="fnlly"
            label="风能利用率%"
            width="120"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="speed"
            label="风速"
          >
          </el-table-column>
          <el-table-column align="center" prop="fjhjx" label="故障">
          </el-table-column>
          <el-table-column align="center" prop="jhjx" label="检修">
          </el-table-column>
          <el-table-column align="center" prop="sl" label="受累">
          </el-table-column>
          <el-table-column align="center" prop="xd" label="限电">
          </el-table-column>
          <el-table-column align="center" prop="xn" label="性能">
          </el-table-column>
        </el-table>
      </div>
      <div class="left">
        <bar-line-chart
          v-if="showDisplay"
          :height="height"
          :bardata="bardata"
          :lineData="lineData"
          :color="barColor"
          lineName="理论发电量"
        />
        <div class="lyl" :style="{ height: tableData.data.length * 35 + 'px' }">
          <div
            class="lyl-item"
            v-for="(item, index) in tableData.data"
            :key="index"
          >
            {{ item.fnlly }}%
            <img class="lyl-item-img" src="@assets/images/fnlyl.png" />
          </div>
        </div>
        <div class="dashed" :style="{ height: height }"></div>
      </div>
    </div>
    <!-- <el-row :type="'flex'" class="content">
      <el-col :span="12" class="pd-r-8">
        <toolbar-panel title="风机绩效榜 (万kWh)" :showLine="false">
          <bar-line-chart
            :height="'calc(100vh - 180px)'"
            :bardata="bardata"
            :lineData="lineData"
            :color="barColor"
            lineName="理论发电量"
          />
        </toolbar-panel>
      </el-col>
      <el-col :span="12" class="pd-l-8">
        <panel :title="'项目列表'" :showLine="false">
          <div class="project-table">
            <Table :data="tableData" :height="'calc(80vh - 50px)'">
              <template v-slot:tr v-if="tableData.data.length > 0">
                <tr>
                  <td style="width: 50px">
                    {{ tableDataEnd.index }}
                  </td>
                  <td style="width: 150px">
                    {{ tableDataEnd.name }}
                  </td>
                  <td>
                    {{ tableDataEnd.llfdl }}
                  </td>
                  <td>
                    {{ tableDataEnd.sjfdl }}
                  </td>
                  <td>
                    {{ tableDataEnd.speed }}
                  </td>
                  <td>
                    {{ tableDataEnd.fjhjx }}
                  </td>
                  <td>
                    {{ tableDataEnd.jhjx }}
                  </td>
                  <td style="width: 80px">
                    {{ tableDataEnd.sl }}
                  </td>
                  <td>
                    {{ tableDataEnd.xd }}
                  </td>
                  <td>
                    {{ tableDataEnd.xn }}
                  </td>
                  <td>
                    {{ tableDataEnd.fnlly }}
                  </td>
                </tr>
              </template>
            </Table>
          </div>
        </panel>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import BarLineChart from "../../components/chart/combination/bar-line-chart.vue";
import Panel from "../../components/coms/panel/panel.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
import Table from "./table.vue";
import partten from "@/helper/partten.js";
import api from "@api/economic/index.js";
export default {
  components: {
    ToolbarPanel,
    BarLineChart,
    Panel,
    Table,
    partten,
    SvgIcon,
  },
  data() {
    return {
      tableData: {
        column: [
          {
            name: "",
            field: "index",
            is_num: false,
            is_light: false,
            width: "50px",
          },
          {
            name: "名称",
            field: "name",
            width: "150px",
            is_num: false,
            is_light: false,
          },
          {
            name: "理论发电量(万kWh)",
            field: "llfdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "SCADA发电量(万kWh)",
            field: "sjfdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "风速(m/s)",
            field: "speed",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "非计划检修(万kWh)",
            field: "fjhjx",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "计划检修(万kWh)",
            field: "jhjx",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "受累(万kWh)",
            field: "sl",
            width: "80px",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "限电(万kWh)",
            field: "xd",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "性能(万kWh)",
            field: "xn",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "风能利用率(%)",
            field: "fnlly",
            is_num: false,
            is_light: false,
            sortable: true,
          },
        ],
        data: [],
      },
      tableDataEnd: [], //合计
      ChangZhan: [], //场站
      XiangMu: [], //项目
      XianLu: [], //线路
      value1: [],
      value2: [],
      value3: [],
      value4: "",
      value5: "",
      barColor: [
        "#05bb4c",
        "#e17e23",
        "#ba3237",
        "#c531c7",
        "#ccf0d3",
        "#4b55ae",
      ],
      actionClass: "1",
      TypeClass: "1", //风场，项目，集电线路 的按钮颜色，默认第一个
      typeOptions: [
        { id: "1", name: "风场" },
        { id: "2", name: "项目" },
        { id: "3", name: "集电线路" },
      ],
      bardata: [],
      lineData: [],
      showDisplay: true,
      height: "880px",
      sort: "",
      target: "",
      sortList: [
        {
          id: "name",
          sort: false,
        },
        {
          id: "llfdl",
          sort: false,
        },
        {
          id: "sjfdl",
          sort: false,
        },
        {
          id: "speed",
          sort: false,
        },
        {
          id: "fjhjx",
          sort: false,
        },
        {
          id: "jhjx",
          sort: false,
        },
        {
          id: "sl",
          sort: false,
        },
        {
          id: "xd",
          sort: false,
        },
        {
          id: "xn",
          sort: false,
        },
        {
          id: "fnlly",
          sort: false,
        },
      ],
    };
  },
  created() {
    this.ChangZhanVal();
    this.value4 = this.getTime(1);
    this.value5 = this.getTime(2);
    this.AjaxCommon();
  },
  methods: {
    ChangZhanVal() {
      api.benchmarkingWplist({}).then((res) => {
        this.ChangZhan = res.data;
      });
      // var that = this;
      // that.API.requestData({
      //   method: "GET",
      //   baseURL: "http://10.83.66.220:8020/",
      //   subUrl: "/consumer/benchmarking/wplist",
      //   success(res) {
      //     that.ChangZhan = res.data;
      //   },
      // });
    },
    ChangZhanChange(val) {
      this.TypeClass = "";
      this.value1 = val;
      this.value2 = [];
      this.value3 = [];
      this.AjaxCommon();
      this.XiangMuVal(val);
    },
    XiangMuVal(val) {
      api
        .benchmarkingProjectList({
          wpids: val,
        })
        .then((res) => {
          this.XiangMu = res.data;
        });

      // var that = this;
      // that.API.requestData({
      //   method: "GET",
      //   baseURL: "http://10.83.66.220:8020/",
      //   subUrl: "/consumer/benchmarking/projectList",
      //   data: {
      //     wpids: val,
      //   },
      //   success(res) {
      //     that.XiangMu = res.data;
      //   },
      // });
    },
    XiangMuChange(val) {
      this.TypeClass = "";
      this.value2 = val;
      this.value3 = [];
      this.AjaxCommon();
      this.XianLuVal(val);
    },
    XianLuVal(val) {
      api
        .benchmarkingLineList({
          projects: val,
        })
        .then((res) => {
          this.XianLu = res.data;
        });

      // var that = this;
      // that.API.requestData({
      //   method: "GET",
      //   baseURL: "http://10.83.66.220:8020/",
      //   subUrl: "/consumer/benchmarking/lineList",
      //   data: {
      //     projects: val,
      //   },
      //   success(res) {
      //     that.XianLu = res.data;
      //   },
      // });
    },
    XianLuChange(val) {
      this.TypeClass = "";
      this.value3 = val;
      this.AjaxCommon();
    },
    BeginChange(val) {
      this.value4 = val;
      this.AjaxCommon();
    },
    EndChange(val) {
      this.value5 = val;
      this.AjaxCommon();
    },
    TypeClick(val) {
      this.TypeClass = val;
      // 重置状态start
      this.value1 = "";
      this.value2 = [];
      this.value3 = [];
      // this.value4 = this.getTime(1);
      // this.value5 = this.getTime(2);
      this.AjaxCommon();
      // 重置状态end
    },
    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;
      }
    },
    onHeaderClick(column) {
      console.log(column);
      this.target = column.property;
      this.sortList.forEach((item) => {
        if (item.id === column.property) {
          item.sort = !item.sort;
          this.sort = item.sort ? 1 : 2;
        } else {
          item.sort = false;
        }
      });
      this.AjaxCommon();
    },
    AjaxCommon() {
      this.actionClass = 1;
      api
        .benchmarking({
          wpids: this.value1,
          projectids: this.value2,
          lineids: this.value3,
          beginDate: this.value4,
          endDate: this.value5,
          type: this.TypeClass,
          target: this.target,
          sort: this.sort,
        })
        .then((res) => {
          if (res) {
            var name = [],
              data = [],
              llfdl = [],
              legend = [
                "实际电量",
                "计划检修损失",
                "非计划检修损失",
                "限电损失",
                "受累损失",
                "性能损失",
              ],
              data2 = []; //项目列表
            res.data.forEach((item, index) => {
              name.push(item.name);
              data.push([
                item.sjfdl,
                item.jhjx,
                item.fjhjx,
                item.xd,
                item.sl,
                item.xn,
              ]);
              llfdl.push(item.llfdl);
              data2.push({
                index: index + 1,
                name: item.name,
                llfdl: item.llfdl,
                sjfdl: item.sjfdl,
                speed: item.speed,
                fjhjx: item.fjhjx,
                jhjx: item.jhjx,
                sl: item.sl,
                xd: item.xd,
                xn: item.xn,
                fnlly: item.fnlly,
                is_light: false,
              });
            });
            name.pop();
            data.pop();
            llfdl.pop();
            if (data.length > 0) {
              let arr1 = [];
              const length = data[0].length;
              for (var i = 0; i < length; i++) {
                let arr2 = [];
                data.forEach((ele) => {
                  arr2.push(ele[i]);
                });
                arr1.push(arr2);
              }
              this.lineData = llfdl;
              this.bardata = {
                area: name,
                legend: legend,
                data: arr1,
              };
            }

            // if (this.lineData.length > 22) {
            //   this.height = this.lineData.length * 35 + 148 + "px";
            // } else if (this.lineData.length == 14) {
            //   this.height = 23 * 35 + 36 + "px";
            // } else {
            //   this.height = 23 * 35 + "px";
            // }
            if (this.lineData.length > 22) {
              this.height = this.lineData.length * 35 + 85 + "px";
            } else if (this.lineData.length == 14) {
              this.height = 22 * 35 + 46 + "px";
            } else {
              this.height = 21 * 35 + 46 + "px";
            }
            this.showDisplay = false;
            setTimeout(() => {
              this.showDisplay = true;
            }, 10);
            this.tableDataEnd = data2[data2.length - 1];
            data2.pop();
            this.tableData.data = data2;
          }
        });
      // var that = this;
      // that.API.requestData({
      //   method: "GET",
      //   baseURL: process.env.VUE_APP_API,
      //   subUrl: "consumer/benchmarking/fjjxb",
      //   data: {
      //     wpids: that.value1,
      //     projectids: that.value2,
      //     lineids: that.value3,
      //     beginDate: that.value4,
      //     endDate: that.value5,
      //     type: that.TypeClass,
      //     target: "",
      //     sort: "",
      //   },
      //   success(res) {
      //     var name = [],
      //       data = [],
      //       llfdl = [],
      //       legend = [
      //         "实际电量",
      //         "计划检修损失",
      //         "非计划检修损失",
      //         "限电损失",
      //         "受累损失",
      //         "性能损失",
      //       ],
      //       data2 = []; //项目列表
      //     res.data.forEach((item, index) => {
      //       name.push(item.name);
      //       data.push([
      //         item.sjfdl,
      //         item.jhjx,
      //         item.fjhjx,
      //         item.xd,
      //         item.sl,
      //         item.xn,
      //       ]);
      //       llfdl.push(item.llfdl);
      //       data2.push({
      //         index: index + 1,
      //         name: item.name,
      //         llfdl: item.llfdl,
      //         sjfdl: item.sjfdl,
      //         speed: item.speed,
      //         fjhjx: item.fjhjx,
      //         jhjx: item.jhjx,
      //         sl: item.sl,
      //         xd: item.xd,
      //         xn: item.xn,
      //         fnlly: item.fnlly,
      //         is_light: false,
      //       });
      //     });
      //     name.pop();
      //     data.pop();
      //     llfdl.pop();
      //     if (data.length > 0) {
      //       let arr1 = [];
      //       const length = data[0].length;
      //       for (var i = 0; i < length; i++) {
      //         let arr2 = [];
      //         data.forEach((ele) => {
      //           arr2.push(ele[i]);
      //         });
      //         arr1.push(arr2);
      //       }
      //       that.lineData = llfdl;
      //       that.bardata = {
      //         area: name,
      //         legend: legend,
      //         data: arr1,
      //       };
      //     }
      //     that.tableDataEnd = data2[data2.length - 1];
      //     data2.pop();
      //     that.tableData.data = data2;
      //   },
      // });
    },
    mxClick() {
      this.$router.push("/decision/decision1Mx");
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    exportExcel() {
      let that = this;
      const { export_json_to_excel } = require("@tools/excel/Export2Excel.js"); // 注意这个Export2Excel路径
      let tHeader = []; // 上面设置Excel的表格第一行的标题
      let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值

      that.tableData.column.forEach((ele) => {
        tHeader.push(ele.name);
        filterVal.push(ele.field);
      });

      var list = [];
      that.tableData.data.forEach((i, index) => {
        list.push(i);
      });
      list.push(that.tableDataEnd);
      const data = that.formatJson(filterVal, list);
      export_json_to_excel(tHeader, data, "风机绩效榜"); // 最后一个是表名字
    },
  },
};
</script>

<style lang="less" scoped>
.decision-page-1 {
  height: 93vh;
  display: flex;
  flex-direction: column;
  .performance-title {
    display: flex;
    height: 41px;
    align-items: center;

    .left-title,
    .right-title {
      width: 46.8%;
      padding-left: 30px;
    }
  }
  .performance {
    // display: flex;
    // flex-direction: row;
    width: 99.5%;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    overflow-y: auto;
    position: relative;

    .economicTable {
      .el-table td.el-table__cell,
      .el-table th.el-table__cell.is-leaf {
        border-bottom: 0;
      }
    }
    .left {
      width: 45%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      flex-direction: row;
      .dashed {
        position: absolute;
        width: 1px;
        background-image: linear-gradient(
          #3a4043 0%,
          #3a4043 40%,
          transparent 50%
        );
        background-size: 1px 9px;
        margin-top: 45px;
        height: 100%;
        right: -50px;
      }
    }
    .lyl {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 70px;
      font-size: 14px;
      font-family: Arial;
      font-weight: 400;
      color: #1c98fe;
      margin-top: 27px;
      margin-left: 10px;
    }
    .lyl-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 36px;
      position: relative;
      width: 120px;
    }
    .lyl-item-img {
      position: absolute;
      left: 0;
      bottom: 0;
      // height: 33px;
    }

    // .center {
    //   width: 3%;
    //   height: 90%;
    //   position: relative;
    //   margin-top: 50px;

    //   .using {
    //     width: 100%;
    //     height: 100%;
    //     z-index: 99;
    //     position: absolute;
    //     right: 0px;
    //     top: 0px;
    //   }
    // }

    .dashed {
      width: 1px;
      background-image: linear-gradient(
        #3a4043 0%,
        #3a4043 40%,
        transparent 50%
      );
      background-size: 1px 9px;
      margin-top: 45px;
    }

    .dashed1 {
      width: 1px;
      background-image: linear-gradient(
        #3a4043 0%,
        #3a4043 40%,
        transparent 50%
      );
      background-size: 1px 9px;
      margin-top: 45px;
      margin-left: 20px;
    }

    .table {
      width: 48%;
      // background-color: yellowgreen;
    }
  }


  .table_cell .cell {
    white-space: nowrap;
  }

  .com-panel .panel-title {
    line-height: 3.4259vh;
  }

  .tools {
    display: flex;
    line-height: 3.4259vh;

    .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;

    tbody {
      height: calc(100vh - 24.5vh);
    }

    td {
      color: #b2bdc0;
    }
  }

  .contentMx {
    width: 100%;
    overflow-x: auto;
  }

  .activeMx {
    width: 150%;
  }
}
</style>