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";
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.155.32.4:9001/",
        subUrl: "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.155.32.4:9001/",
        subUrl: "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.155.32.4:9001/",
        subUrl: "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() {
      var that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.4:9001/",
        subUrl: "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>