hb_sis_zhfx/src/views/Decision/Decision1Mx.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">
        <button class="btn" @click="mxClick()">搜索</button>
        <button class="btn green">明细信息</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>
    <div class="contentMx">
      <div class="activeMx">
        <el-row :type="'flex'" class="content">
          <el-col :span="10" class="pd-r-8">
            <toolbar-panel title="风机绩效榜明细" :showLine="false">
              <bar-line-chart
                :height="'calc(100vh - 250px)'"
                :bardata="bardata"
                :lineData="lineData"
                :color="barColor"
                lineName="理论发电量"
              />
            </toolbar-panel>
          </el-col>
          <el-col :span="14" class="pd-l-8">
            <panel :title="'项目列表'" :showLine="false">
              <div class="project-table">
                <Table :data="tableData">
                  <template v-slot:tr v-if="tableData.data.length > 0">
                    <tr>
                      <td>
                        {{ tableDataEnd.index }}
                      </td>
                      <td style="width: 150px">
                        {{ tableDataEnd.name }}
                      </td>
                      <td>
                        {{ tableDataEnd.llfdl }}
                      </td>
                      <td>
                        {{ tableDataEnd.sjfdl }}
                      </td>
                      <td>
                        {{ tableDataEnd.speed }}
                      </td>
                      <td>
                        {{ tableDataEnd.fjhjx1 }}
                      </td>
                      <td>
                        {{ tableDataEnd.fjhjx2 }}
                      </td>
                      <td>
                        {{ tableDataEnd.jhjx1 }}
                      </td>
                      <td>
                        {{ tableDataEnd.jhjx2 }}
                      </td>
                      <td>
                        {{ tableDataEnd.sl1 }}
                      </td>
                      <td>
                        {{ tableDataEnd.sl2 }}
                      </td>
                      <td>
                        {{ tableDataEnd.xd1 }}
                      </td>
                      <td>
                        {{ tableDataEnd.xd2 }}
                      </td>
                      <td>
                        {{ tableDataEnd.xn1 }}
                      </td>
                      <td>
                        {{ tableDataEnd.xn2 }}
                      </td>
                      <td>
                        {{ tableDataEnd.xn3 }}
                      </td>
                      <td>
                        {{ tableDataEnd.xn4 }}
                      </td>
                      <td>
                        {{ tableDataEnd.fnlly }}
                      </td>
                    </tr>
                  </template>
                </Table>
              </div>
            </panel>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import BarLineChart from "../../components/chart/combination/bar-line-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 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,
          },
          {
            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: "fjhjx1",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "故障受累",
            field: "fjhjx2",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修损失",
            field: "jhjx1",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修受累",
            field: "jhjx2",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "电网受累",
            field: "sl1",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "天气受累",
            field: "sl2",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "限电降出",
            field: "xd1",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "限电停机",
            field: "xd2",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "待风损失",
            field: "xn1",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "手动停机",
            field: "xn2",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "正常发电",
            field: "xn3",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "缺陷降出",
            field: "xn4",
            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: [
        partten.getColor("purple"),
        partten.getColor("green"),
        partten.getColor("pink"),
        partten.getColor("red"),
        partten.getColor("orange"),
        partten.getColor("grayl"),
        partten.getColor("yellow"),
        partten.getColor("gray"),
        partten.getColor("blue"),
        partten.getColor("cyan"),
        partten.getColor("brown"),
        partten.getColor("mauve"),
      ],
      TypeClass: 1, //风场，项目，集电线路 的按钮颜色，默认第一个
      bardata: [],
      lineData: [],
    };
  },
  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;
      });
    },
    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;
      });
    },
    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
      });
    },
    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.83.66.220:8020/",
    //     subUrl: "http://10.83.66.220:8020/mx",
    //     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 = []; //项目列表

    //       if (that.value1.length) {
    //         let arr = [];
    //         let hj = res.data.pop();
    //         res.data.forEach((ele, index) => {
    //           arr[ele.id.split("_")[1] - 1] = ele;
    //         });
    //         arr.push(hj);
    //         res.data = arr;
    //       }

    //       res.data.forEach((item, index) => {
    //         name.push(item.name);
    //         llfdl.push(item.llfdl);
    //         data.push([
    //           item.sjfdl,
    //           item.fjhjx1,
    //           item.fjhjx2,
    //           item.jhjx1,
    //           item.jhjx2,
    //           item.sl1,
    //           item.sl2,
    //           item.xd1,
    //           item.xd2,
    //           item.xn1,
    //           item.xn2,
    //           item.xn3,
    //           item.xn4,
    //         ]);
    //         data2.push({
    //           index: index + 1,
    //           name: item.name,
    //           llfdl: item.llfdl,
    //           sjfdl: item.sjfdl,
    //           speed: item.speed,
    //           fjhjx1: item.fjhjx1,
    //           fjhjx2: item.fjhjx2,
    //           jhjx1: item.jhjx1,
    //           jhjx2: item.jhjx2,
    //           sl1: item.sl1,
    //           sl2: item.sl2,
    //           xd1: item.xd1,
    //           xd2: item.xd2,
    //           xn1: item.xn1,
    //           xn2: item.xn2,
    //           xn3: item.xn3,
    //           xn4: item.xn4,
    //           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/decision1");
    },
    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值

      //   var that = this;
      //   that.API.requestData({
      //     method: "GET",
      //     baseURL: "http://10.83.66.220:8020/",
      //     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) {
      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: "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
        .benchmarkingmx({
          wpids: this.value1,
          projectids: this.value2,
          lineids: this.value3,
          beginDate: this.value4,
          endDate: this.value5,
          type: this.TypeClass,
          target: "",
          sort: "",
        })
        .then((res) => {
          var name = [],
            data = [],
            llfdl = [],
            legend = [
              "实际电量",
              "故障损失",
              "故障受累",
              "检修受累",
              "电网受累",
              "天气受累",
              "限电降出",
              "限电停机",
              "待风损失",
              "手动停机",
              "正常发电",
              "缺陷降出",
            ],
            data2 = []; //项目列表
          res.data.forEach((item, index) => {
            name.push(item.name);
            llfdl.push(item.llfdl);
            data.push([
              item.sjfdl,
              item.fjhjx1,
              item.fjhjx2,
              item.jhjx1,
              item.jhjx2,
              item.sl1,
              item.sl2,
              item.xd1,
              item.xd2,
              item.xn1,
              item.xn2,
              item.xn3,
              item.xn4,
            ]);
            data2.push({
              index: index + 1,
              name: item.name,
              llfdl: item.llfdl,
              sjfdl: item.sjfdl,
              speed: item.speed,
              fjhjx1: item.fjhjx1,
              fjhjx2: item.fjhjx2,
              jhjx1: item.jhjx1,
              jhjx2: item.jhjx2,
              sl1: item.sl1,
              sl2: item.sl2,
              xd1: item.xd1,
              xd2: item.xd2,
              xn1: item.xn1,
              xn2: item.xn2,
              xn3: item.xn3,
              xn4: item.xn4,
              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: "http://10.83.66.220:8020/",
      //     subUrl: "http://10.83.66.220:8020/mx",
      //     data: {
      //       wpids: that.value1,
      //       projectids: that.value2,
      //       lineids: that.value3,
      //       beginDate: that.value4,
      //       endDate: that.value5,
      //       type: that.TypeClass,
      //       target: "",
      //       sort: "",
      //     },
      //     success(res) {
      //       console.log(res);
      //       var name = [],
      //         data = [],
      //         llfdl = [],
      //         legend = [
      //           "实际电量",
      //           "故障损失",
      //           "故障受累",
      //           "检修受累",
      //           "电网受累",
      //           "天气受累",
      //           "限电降出",
      //           "限电停机",
      //           "待风损失",
      //           "手动停机",
      //           "正常发电",
      //           "缺陷降出",
      //         ],
      //         data2 = []; //项目列表
      //       res.data.forEach((item, index) => {
      //         name.push(item.name);
      //         llfdl.push(item.llfdl);
      //         data.push([
      //           item.sjfdl,
      //           item.fjhjx1,
      //           item.fjhjx2,
      //           item.jhjx1,
      //           item.jhjx2,
      //           item.sl1,
      //           item.sl2,
      //           item.xd1,
      //           item.xd2,
      //           item.xn1,
      //           item.xn2,
      //           item.xn3,
      //           item.xn4,
      //         ]);
      //         data2.push({
      //           index: index + 1,
      //           name: item.name,
      //           llfdl: item.llfdl,
      //           sjfdl: item.sjfdl,
      //           speed: item.speed,
      //           fjhjx1: item.fjhjx1,
      //           fjhjx2: item.fjhjx2,
      //           jhjx1: item.jhjx1,
      //           jhjx2: item.jhjx2,
      //           sl1: item.sl1,
      //           sl2: item.sl2,
      //           xd1: item.xd1,
      //           xd2: item.xd2,
      //           xn1: item.xn1,
      //           xn2: item.xn2,
      //           xn3: item.xn3,
      //           xn4: item.xn4,
      //           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/decision1");
    },
    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">
.contentMx::-webkit-scrollbar {
  width: 200px;
  height: 20px;
}

.contentMx::-webkit-scrollbar-track-piece {
  background-color: rgba(255, 255, 255, 0.05);
  -webkit-border-radius: 4px;
}

.contentMx::-webkit-scrollbar-thumb {
  background-color: fade(@gray, 75);
  -webkit-border-radius: 4px;
  outline: none;
  outline-offset: 0px;
  border: none;
}

.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 - 31.5vh);
    }

    td {
      color: #b2bdc0;
    }
  }

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

  .activeMx {
    width: 130%;
  }
}

.main {
  overflow: auto;
}

// .main .main-body{height: calc(100vh - 6.63vh);}
.bg-olive {
  background-color: #8dc63f;
  color: #ffffff;
}

.bg-cyan {
  background-color: #1cbbb4;
}

.bg-mauve {
  background-color: #9c26b0;
}

.bg-pink {
  background-color: #e03997;
}

.bg-brown {
  background-color: #a5673f;
}

.bg-pink2 {
  background-color: #ff0099;
}

.bg-blue2 {
  background-color: #07abf5;
}

.bg-green2 {
  background-color: #1d3638;
}
</style>