jn_sis_zhfx/src/views/Decision/Decision1Mx.vue

<template>
  <div
    :class="
      $store.state.themeName == 'dark'
        ? 'dark-preformance'
        : 'light-preformance'
    "
  >
    <div class="decision-page-1">
      <div class="query-form">
        <!-- mg-b-8-->
        <div class="station1">
          场站：
          <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="station1">
          项目：
          <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="station1">
          线路：
          <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" @click="mxClick"
            >搜索</el-button
          >
          <el-button round size="mini" class="btn green" @click="AjaxCommon"
            >明细信息</el-button
          >
          <el-button round size="mini" class="btn" @click="exportExcel"
            >导出</el-button
          >
        </div>
      </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 prop="" label="" width="1050"> </el-table-column>
            <el-table-column align="center" prop="" label="" type="index">
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="名称"
              width="180"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="llfdl"
              label="理论发电量"
              width="100"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="sjfdl"
              label="实际发电量"
              width="100"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="fnlly"
              label="风能利用率%"
              width="140"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="speed"
              show-overflow-tooltip
              label="风速"
            >
            </el-table-column>
            <el-table-column align="center" prop="fjhjx1" label="故障损失">
            </el-table-column>
            <el-table-column align="center" prop="fjhjx2" label="故障受累">
            </el-table-column>
            <el-table-column align="center" prop="jhjx1" label="检修损失">
            </el-table-column>
            <el-table-column align="center" prop="jhjx2" label="检修受累">
            </el-table-column>
            <el-table-column align="center" prop="sl1" label="电网受累">
            </el-table-column>
            <el-table-column align="center" prop="sl2" label="天气受累">
            </el-table-column>
            <el-table-column align="center" prop="xd1" label="限电降出">
            </el-table-column>
            <el-table-column align="center" prop="xd2" label="限电停机">
            </el-table-column>
            <el-table-column align="center" prop="xn1" label="待风损失">
            </el-table-column>
            <el-table-column align="center" prop="xn2" label="手动停机">
            </el-table-column>
            <el-table-column align="center" prop="xn3" label="正常发电">
            </el-table-column>
            <el-table-column align="center" prop="xn4" label="缺陷降出">
            </el-table-column>
          </el-table>
        </div>
        <div class="performance-left">
          <bar-line-chart
            v-if="showDisplay"
            :height="height"
            :bardata="bardata"
            :lineData="lineData"
            :color="barColor"
            lineName="理论发电量"
          />
          <div
            class="lyl"
            :style="{ height: tableData.data.length * 37 + '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>
      <!-- <div class="contentMx">
      <div class="activeMx">
        <el-row :type="'flex'" class="content">
          <el-col :span="10" class="pd-r-8">
            <toolbar-panel title="风机绩效榜明细(万kWh)" :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>
  </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: "理论发电量(万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: "fjhjx1",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "故障受累(万kWh)",
            field: "fjhjx2",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修损失(万kWh)",
            field: "jhjx1",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修受累(万kWh)",
            field: "jhjx2",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "电网受累(万kWh)",
            field: "sl1",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "天气受累(万kWh)",
            field: "sl2",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "限电降出(万kWh)",
            field: "xd1",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "限电停机(万kWh)",
            field: "xd2",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "待风损失(万kWh)",
            field: "xn1",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "手动停机(万kWh)",
            field: "xn2",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "正常发电(万kWh)",
            field: "xn3",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "缺陷降出(万kWh)",
            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", //风场，项目，集电线路 的按钮颜色，默认第一个
      typeOptions: [
        { id: "1", name: "风场" },
        { id: "2", name: "项目" },
        { id: "3", name: "集电线路" },
      ],
      bardata: [],
      lineData: [],
      showDisplay: true,
      height: "858px",
      sort: "",
      target: "",
      sortList: [
        {
          id: "name",
          sort: false,
        },
        {
          id: "llfdl",
          sort: false,
        },
        {
          id: "sjfdl",
          sort: false,
        },
        {
          id: "speed",
          sort: false,
        },
        {
          id: "fjhjx1",
          sort: false,
        },
        {
          id: "fjhjx2",
          sort: false,
        },
        {
          id: "jhjx1",
          sort: false,
        },
        {
          id: "jhjx2",
          sort: false,
        },
        {
          id: "sl1",
          sort: false,
        },
        {
          id: "sl2",
          sort: false,
        },
        {
          id: "xd1",
          sort: false,
        },
        {
          id: "xd2",
          sort: false,
        },
        {
          id: "xn1",
          sort: false,
        },
        {
          id: "xn2",
          sort: false,
        },
        {
          id: "xn3",
          sort: false,
        },
        {
          id: "xn4",
          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;
      });
    },
    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;
      }
    },
    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() {
      api
        .benchmarkingmx({
          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) => {
          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,
            };
          }
          if (this.lineData.length > 21) {
            this.height = this.lineData.length * 37 + 65 + "px";
          } else if (this.lineData.length == 20) {
            this.height = 20 * 37 + 65 + "px";
          } else {
            this.height = 21 * 37 + 75 + "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: "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" scoped>
.light-preformance {
  .decision-page-1 {
    height: 93vh;
    display: flex;
    flex-direction: column;
    .performance-title {
      display: flex;
      height: 41px;
      justify-content: space-between;
      align-items: center;
      .left-title,
      .right-title {
        width: 45.8%;

        padding-left: 30px;
      }
    }

    .performance {
      display: flex;
      flex-direction: row;
      width: 98.5%;
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 5px;
      overflow-y: auto;
      position: relative;
      margin-top: 10px;
      margin-left: 1%;

      .economicTable {
        .el-table td.el-table__cell,
        .el-table th.el-table__cell.is-leaf {
          border-bottom: transparent;
        }
        // .el-table td.el-table__cell{
        //   height: 60px;
        // }
        // .el-table{
        //   .el-table-column{
        //      height: 60px;
        // }
        //   }
        // }
      }
      .performance-left {
        width: 53%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: row;
        padding-top: 0;
        .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: 37px;
        position: relative;
        width: 120px;
      }
      .lyl-item-img {
        position: absolute;
        left: 0;
        bottom: 0;
        // height: 33px;
      }
      .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;
    }
  }
}
.dark-preformance {
  .decision-page-1 {
    height: 93vh;
    display: flex;
    flex-direction: column;
    .performance-title {
      display: flex;
      height: 41px;
      justify-content: space-between;
      align-items: center;
      .left-title,
      .right-title {
        width: 45.8%;

        padding-left: 30px;
      }
    }

    .performance {
      display: flex;
      flex-direction: row;
      width: 98.5%;
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 5px;
      overflow-y: auto;
      position: relative;
      margin-top: 10px;
      margin-left: 1%;

      .economicTable {
        .el-table td.el-table__cell,
        .el-table th.el-table__cell.is-leaf {
          border-bottom: transparent;
        }
        // .el-table td.el-table__cell{
        //   height: 60px;
        // }
        // .el-table{
        //   .el-table-column{
        //      height: 60px;
        // }
        //   }
        // }
      }
      .performance-left {
        width: 53%;
        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: 37px;
        position: relative;
        width: 120px;
      }
      .lyl-item-img {
        position: absolute;
        left: 0;
        bottom: 0;
        // height: 33px;
      }
      .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;
    }
  }
}

.contentMx::-webkit-scrollbar {
  width: 10px;
  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>