hb_sis_zhfx/src/views/Decision/Decision1.vue

<template>
  <div class="decision-page-1">
    <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"
              @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>
        <div class="query-item">
          <div class="lable">项目：</div>
          <div class="search-input">
            <el-select
              v-model="value2"
              @change="XiangMuChange(value2)"
              multiple
              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>
        <div class="query-item">
          <div class="lable">线路：</div>
          <div class="search-input">
            <el-select
              v-model="value3"
              @change="XianLuChange(value3)"
              multiple
              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>
        <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>
      <div class="query-actions" style="margin-left: 0px">
        <button class="btn green">搜索</button>
        <button class="btn" @click="mxClick()">明细信息</button>
        <button class="btn" @click="exportExcel()">导出</button>
      </div>
    </div>
    <div class="actions mg-b-8">
      <button
        class="btn"
        :class="TypeClass == 1 ? 'green' : ''"
        @click="TypeClick(1)"
      >
        风场
      </button>
      <button
        class="btn"
        :class="TypeClass == 2 ? 'green' : ''"
        @click="TypeClick(2)"
      >
        项目
      </button>
      <button
        class="btn"
        :class="TypeClass == 3 ? 'green' : ''"
        @click="TypeClick(3)"
      >
        集电线路
      </button>
    </div>
    <el-row :type="'flex'" class="content">
      <el-col :span="12" class="pd-r-8">
        <toolbar-panel title="风机绩效榜" :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 -->
            <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>
            <!-- <Table :data="tableData"></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: "理论发电量",
            field: "llfdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "SCADA发电量",
            field: "sjfdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "风速",
            field: "speed",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "非计划检修",
            field: "fjhjx",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "计划检修",
            field: "jhjx",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "受累",
            field: "sl",
            width: "80px",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "限电",
            field: "xd",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "性能",
            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: [
        "#4b55ae",
        "#e17e23",
        "#ba3237",
        "#c531c7",
        "#ffffff",
        "#05bb4c",
      ],
      TypeClass: 1, //风场，项目，集电线路 的按钮颜色，默认第一个
      bardata: [],
      lineData: [],
    };
  },
  created() {
    this.ChangZhanVal();
    this.value4 = this.getTime(1);
    this.value5 = this.getTime(2);
    this.AjaxCommon();
  },
  methods: {
    ChangZhanVal() {
      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) {
      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) {
      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;
      }
    },
    AjaxCommon() {
      api.benchmarking({
          wpids: this.value1,
          projectids: this.value2,
          lineids: this.value3,
          beginDate: this.value4,
          endDate: this.value5,
          type: this.TypeClass,
          target: "",
          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,
              };
            }
            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, "导出的Excel"); // 最后一个是表名字
    },
  },
};
</script>

<style lang="less">
.decision-page-1 {
  .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>