fd_dwgz_zhyw_nx/src/views/Decision/Decision2Xmdb.vue

<template>
  <div class="decision-page-2">
    <div class="query-form">
      <div class="station1">
        场站：
        <el-select
          v-model="value1"
          @change="ChangZhanChange(value1)"
           size="mini"
          multiple
          collapse-tags
          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
          v-model="value2"
          @change="XiangMuChange(value2)"
           size="mini"
          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
          v-model="value3"
          @change="XianLuChange(value3)"
           size="mini"
          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 class="btn green" @click="AjaxCommon()">搜索</el-button>
        <el-button round class="btn" @click="dbfx">对标分析</el-button>
        <el-button round class="btn" @click="exportExcel()">导出</el-button>
        <el-button round class="btn" v-show="detailShow == 2" @click="back">返回</el-button>
      </div>
    </div>
    <div v-show="detailShow == 1">
<div class="tabCut2">
        <div class="tabCut-item">
          <span>项目对标</span>
        </div>
      </div>
      <!-- <toolbar-panel title="项目对标" :showLine="false"></toolbar-panel> -->
      <div class="mg-b-16">
        <div class="project-table">
          <Table :data="tableData" :canScroll="false" ref="curRef"></Table>
        </div>
      </div>
    

    <div class="echarts">
      <div class="pie-echarts">
        <div class="chart-name">
          <div class="point left bottom"></div>
          <div class="point right bottom"></div>
          发电量占比
        </div>
        <!-- <panel title="发电量占比"> -->
          <dual-pie-chart
            height="21.296vh"
            :innerData="innerFdl"
            :outerData="outerFdl"
          />
        <!-- </panel> -->
      </div>
      <div class="bar-echarts">
        <div class="chart-name">
          <div class="point left bottom"></div>
          <div class="point right bottom"></div>
          损失电量分析
        </div>
        <!-- <panel title="损失电量分析"> -->
          <multiple-bar-chart
            :height="'calc(100vh - 21.3vh - 550px)'"
            :list="analyis"
            :customerTooltip="true"
            @tooltip="tooltip"
            :units="['(万KWh)']"
          />
        <!-- </panel> -->
      </div>
    </div>
    </div>

    <!-- <el-row class="mg-b-16">
        <el-col :span="12">
          <panel title="发电量占比">
            <dual-pie-chart
              height="21.296vh"
              :innerData="innerFdl"
              :outerData="outerFdl"
            />
          </panel>
        </el-col>
        <el-col :span="12">
          <panel title="各场站损失电量占比">
            <dual-pie-chart
              height="21.296vh"
              :innerData="innerCz"
              :outerData="outerCz"
            />
          </panel>
        </el-col>
      </el-row>
      <div>
        <panel title="损失电量分析">
          <multiple-bar-chart
            :height="'calc(100vh - 21.3vh - 550px)'"
            :list="analyis"
            :customerTooltip="true"
            @tooltip="tooltip"
            :units="['(万KWh)']"
          />
        </panel>
      </div>
    </div>-->
    <el-row :type="'flex'" class="content" v-show="detailShow == 2">
      <el-col :span="24" class="pd-l-8">
      <div class="tabCut2">
        <div class="tabCut-item">
          <span>风机对标列表明细</span>
        </div>
      </div>
        <!-- <panel :title="'风机对标列表明细'" :showLine="false"> -->
          <div class="project-table">
            <Table :data="tableDataDetail" ref="curRef"></Table>
          </div>
        <!-- </panel> -->
      </el-col>
    </el-row>

    <el-dialog
      title="对标排名分析"
      v-model="dialogVisible"
      width="70%"
      top="10vh"
      custom-class="modal"
      :close-on-click-modal="false"
    >
      <dayinfo
        :radarValue="radarValue"
        :title="[windNum, windNum2]"
        :windNum="windNum"
        :windNum2="windNum2"
        :tabs="tabs"
        :analyisDialog="analyisDialog"
      />
    </el-dialog>
  </div>
</template>

<script>
import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
import DualPieChart from "./dual-pie-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import Panel from "../../components/coms/panel/panel.vue";
import Table from "../../components/coms/table/table.vue";
import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
import Dayinfo from "./dayinfo.vue";
import api from "@api/economic/index.js";
export default {
  components: {
    Panel,
    Table,
    SvgIcon,
    DualPieChart,
    MultipleBarChart,
    ToolbarPanel,
    Dayinfo,
  },
  data() {
    let that = this;
    return {
      tableIdArr: [], //放checkbox的id数组
      tableId: [],
      checkLength: 0, //对标分析只能选择2个

      tableData: {
        column: [
          // {
          //   name: "",
          //   field: "index",
          //   is_num: false,
          //   is_light: false,
          // },
          {
            name: "",
            field: "check",
            is_num: false,
            is_light: false,
            template: function () {
              return "<input class='check curCheckBox' type='CheckBox'/>";
            },
            click: function (event, data) {
              // checkbox 事件
              // event.target checkbox or td 需进行判断
              // event.target.checked 判断 checkbox 是否选中
              // data  当前数据
              var dataId = that.tableIdArr[data.index - 1];
              if (event.target.checked == false && that.checkLength <= 2) {
                that.tableId.forEach((item, i) => {
                  if (item == dataId) {
                    that.tableId.splice(i, 1);
                    that.dbData.splice(i, 1);
                  }
                });
                that.checkLength--;
              } else if (event.target.checked && that.checkLength < 2) {
                that.tableId.push(dataId);
                that.dbData.push(data);
                that.checkLength++;
              } else if (that.checkLength == 2) {
                event.target.checked = false;
              }
            },
          },
          {
            name: "名称",
            field: "name",
            is_num: false,
            is_light: false,
            width: "100px",
          },
          {
            name: "综合排名",
            field: "zhpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "发电量排名",
            field: "fdlpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "发电量(万kWh)",
            field: "fdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "故障损失排名",
            field: "gzssdlpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "故障损失(万kWh)",
            field: "gzssdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修损失排名",
            field: "jxssdlpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修损失(万kWh)",
            field: "jxssdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "性能损失排名",
            field: "xnssdlpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "性能损失(万kWh)",
            field: "xnssdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "限电损失排名",
            field: "xdssdlpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "限电损失(万kWh)",
            field: "xdssdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "受累损失排名",
            field: "slssdlpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "受累损失(万kWh)",
            field: "slssdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "风能利用率排名",
            field: "fnlylpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "风能利用率(%)",
            field: "fnlyl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "故障损失率排名",
            field: "gzsslpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "故障损失率(%)",
            field: "gzssl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修损失率排名",
            field: "jxsslpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修损失率(%)",
            field: "jxssl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "弃风率排名",
            field: "qflpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "弃风率(%)",
            field: "qfl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "性能损失率排名",
            field: "xnsslpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "性能损失率(%)",
            field: "xnssl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "受累损失率排名",
            field: "slsslpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "受累损失率(%)",
            field: "slssl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "操作",
            field: "cz",
            is_num: false,
            is_light: false,
            template: function () {
              return "<a class='action'>详情</a>";
            },
            click: function (event, data) {
              var dataId = that.tableIdArr[data.index - 1];
              that.clearDb();
              that.detailShow = 2;
              // var that = this;

              api
                .benchmarkingDetails({
                  id: dataId,
                  beginDate: that.value4,
                  endDate: that.value5,
                  target: "",
                  sort: "",
                })
                .then((res) => {
                  var dataTab = [];
                  res.data.forEach((item, index) => {
                    that.tableIdArr.push(item.id);

                    dataTab.push({
                      //表格
                      // index: index + 1,
                      name: item.name,
                      zhpm: item.zhpm,
                      gzssdl: item.gzssdl,
                      jxssdlpm: item.jxssdlpm,
                      jxssdl: item.jxssdl,
                      xnssdlpm: item.xnssdlpm,
                      xnssdl: item.xnssdl,
                      xdssdlpm: item.xdssdlpm,
                      xdssdl: item.xdssdl,
                      slssdlpm: item.slssdlpm,
                      slssdl: item.slssdl,
                      fnlylpm: item.fnlylpm,
                      fnlyl: item.fnlyl,
                      gzsslpm: item.gzsslpm,
                      gzssl: item.gzssl,
                      jxsslpm: item.jxsslpm,
                      jxssl: item.jxssl,
                      qflpm: item.qflpm,
                      qfl: item.qfl,
                      xnsslpm: item.xnsslpm,
                      xnssl: item.xnssl,
                      slsslpm: item.slsslpm,
                      slssl: item.slssl,
                      is_light: false,
                    });
                  });
                  that.tableDataDetail.data = dataTab;
                });

              // that.API.requestData({
              //   method: "GET",
              //   baseURL: "http://10.83.66.220:8020/",
              //   subUrl: "benchmarking/details",
              //   data: {
              //     id: dataId,
              //     beginDate: that.value4,
              //     endDate: that.value5,
              //     target: "",
              //     sort: "",
              //   },
              //   success(res) {
              //     var dataTab = [];
              //     res.data.forEach((item, index) => {
              //       that.tableIdArr.push(item.id);

              //       dataTab.push({
              //         //表格
              //         index: index + 1,
              //         name: item.name,
              //         zhpm: item.zhpm,
              //         gzssdl: item.gzssdl,
              //         jxssdlpm: item.jxssdlpm,
              //         jxssdl: item.jxssdl,
              //         xnssdlpm: item.xnssdlpm,
              //         xnssdl: item.xnssdl,
              //         xdssdlpm: item.xdssdlpm,
              //         xdssdl: item.xdssdl,
              //         slssdlpm: item.slssdlpm,
              //         slssdl: item.slssdl,
              //         fnlylpm: item.fnlylpm,
              //         fnlyl: item.fnlyl,
              //         gzsslpm: item.gzsslpm,
              //         gzssl: item.gzssl,
              //         jxsslpm: item.jxsslpm,
              //         jxssl: item.jxssl,
              //         qflpm: item.qflpm,
              //         qfl: item.qfl,
              //         xnsslpm: item.xnsslpm,
              //         xnssl: item.xnssl,
              //         slsslpm: item.slsslpm,
              //         slssl: item.slssl,
              //         is_light: false,
              //       });
              //     });
              //     that.tableDataDetail.data = dataTab;
              //   },
              // });
            },
          },
        ],
        data: [],
      },
      tableDataDetail: {
        column: [
          // {
          //   name: "",
          //   field: "index",
          //   is_num: false,
          //   is_light: false,
          // },
          {
            name: "",
            field: "check",
            is_num: false,
            is_light: false,
            template: function () {
              return "<input class='check curCheckBox checkItem' type='CheckBox'/>";
            },
            click: function (event, data) {
              var dataId = that.tableIdArr[data.index - 1];
              if (event.target.checked == false && that.checkLength <= 2) {
                that.tableId.forEach((item, i) => {
                  if (item == dataId) {
                    that.tableId.splice(i, 1);
                    that.dbData.splice(i, 1);
                  }
                });
                that.checkLength--;
              } else if (event.target.checked && that.checkLength < 2) {
                that.tableId.push(dataId);
                that.dbData.push(data);
                that.checkLength++;
              } else if (that.checkLength == 2) {
                event.target.checked = false;
              }
            },
          },
          {
            name: "风机名称",
            field: "name",
            is_num: false,
            is_light: false,
          },
          {
            name: "综合排名",
            field: "zhpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "故障损失",
            field: "gzssdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修损失排名",
            field: "jxssdlpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修损失",
            field: "jxssdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "性能损失排名",
            field: "xnssdlpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "性能损失",
            field: "xnssdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "限电损失排名",
            field: "xdssdlpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "限电损失",
            field: "xdssdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "受累损失排名",
            field: "slssdlpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "受累损失",
            field: "slssdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "故障损失率排名",
            field: "gzsslpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "故障损失率(%)",
            field: "gzssl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修损失率排名",
            field: "jxsslpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修损失率(%)",
            field: "jxssl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "弃风率排名",
            field: "qflpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "弃风率(%)",
            field: "qfl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "性能损失率排名",
            field: "xnsslpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "性能损失率(%)",
            field: "xnssl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "受累损失率排名",
            field: "slsslpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "受累损失率(%)",
            field: "slssl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
        ],
        data: [],
      },
      options: [],
      ChangZhan: [], //场站
      XiangMu: [], //项目
      value1: [],
      value2: [],
      value4: "",
      value5: "",
      innerFdl: [], //发电量占比
      outerFdl: [],
      innerCz: [], //各场站损失电量占比
      outerCz: [],
      innerLl: [], //理论发电量占比
      outerLl: [],
      analyis: [], //损失电量分析
      dialogVisible: false,
      radarValue: [],
      windNum: "dd",
      windNum2: "dd",
      tabs: [],
      analyisDialog: [],
      detailShow: 1,
      ajaxData: [],
      dbData: [],
    };
  },
  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;
        this.AjaxCommon();
      });

      // var that = this;
      // that.API.requestData({
      //   method: "GET",
      //   baseURL: "http://10.83.66.220:8020/",
      //   subUrl: "benchmarking/wplist",
      //   success(res) {
      //     that.ChangZhan = res.data;
      //     that.AjaxCommon();
      //   },
      // });
    },
    ChangZhanChange(val) {
      this.value1 = val;
      this.value2 = [];
      this.AjaxCommon();
      this.XiangMuVal(val);
      this.clearDb();
    },
    XiangMuVal(val) {
      api
        .benchmarkingProjectList({
          wpids: val,
        })
        .then((res) => {
          this.XiangMu = res.data;
        });

      // var that = this;
      // that.API.requestData({
      //   method: "GET",
      //   baseURL: "http://10.83.66.220:8020/",
      //   subUrl: "benchmarking/projectList",
      //   data: {
      //     wpids: val,
      //   },
      //   success(res) {
      //     that.XiangMu = res.data;
      //   },
      // });
    },
    XiangMuChange(val) {
      this.value2 = val;
      this.AjaxCommon();
      this.clearDb();
    },
    BeginChange(val) {
      this.value4 = val;
      this.AjaxCommon();
      this.clearDb();
    },
    EndChange(val) {
      this.value5 = val;
      this.AjaxCommon();
      this.clearDb();
    },
    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
        .benchmarkingXmdb({
          wpids: this.value1,
          projectids: this.value2,
          beginDate: this.value4,
          endDate: this.value5,
          target: "",
          sort: "",
        })
        .then((res) => {
          this.tableIdArr = [];
          this.ajaxData = res.data;
          var dataTab = [], //表格
            fdl = [],
            cz = [],
            ll = [],
            analyis = [],
            gzssdl = [],
            jxssdl = [],
            xnssdl = [],
            xdssdl = [],
            slssdl = [];
          res.data.forEach((item, index) => {
            this.tableIdArr.push(item.id);
            dataTab.push({
              //表格
              index: index + 1,
              name: item.name,
              zhpm: item.zhpm,
              fdlpm: item.fdlpm,
              fdl: item.fdl,
              gzssdlpm: item.gzssdlpm,
              gzssdl: item.gzssdl,
              jxssdlpm: item.jxssdlpm,
              jxssdl: item.jxssdl,
              xnssdlpm: item.xnssdlpm,
              xnssdl: item.xnssdl,
              xdssdlpm: item.xdssdlpm,
              xdssdl: item.xdssdl,
              slssdlpm: item.slssdlpm,
              slssdl: item.slssdl,
              fnlylpm: item.fnlylpm,
              fnlyl: item.fnlyl,
              gzsslpm: item.gzsslpm,
              gzssl: item.gzssl,
              jxsslpm: item.jxsslpm,
              jxssl: item.jxssl,
              qflpm: item.qflpm,
              qfl: item.qfl,
              xnsslpm: item.xnsslpm,
              xnssl: item.xnssl,
              slsslpm: item.slsslpm,
              slssl: item.slssl,
              is_light: false,
            });

            fdl.push({
              value: item.fdl,
              name: item.name.slice(0, item.name.length - 2),
            });

            cz.push({
              value: (
                item.gzssdl +
                item.jxssdl +
                item.xnssdl +
                item.xdssdl +
                item.slssdl
              ).toFixed(2),
              name: item.name.slice(0, item.name.length - 2),
            });

            ll.push({
              value: item.llfdl,
              name: item.name.slice(0, item.name.length - 2),
            });

            gzssdl.push({
              text: item.name,
              value: item.gzssdl,
            });
            jxssdl.push({
              text: item.name,
              value: item.jxssdl,
            });
            xnssdl.push({
              text: item.name,
              value: item.xnssdl,
            });
            xdssdl.push({
              text: item.name,
              value: item.xdssdl,
            });
            slssdl.push({
              text: item.name,
              value: item.slssdl,
            });
          });
          analyis.push(
            {
              title: "故障损失电量",
              yAxisIndex: 0,
              value: gzssdl,
            },
            {
              title: "检修损失电量",
              yAxisIndex: 0,
              value: jxssdl,
            },
            {
              title: "性能损失电量",
              yAxisIndex: 0,
              value: xnssdl,
            },
            {
              title: "限电损失电量",
              yAxisIndex: 0,
              value: xdssdl,
            },
            {
              title: "受累损失电量",
              yAxisIndex: 0,
              value: slssdl,
            }
          );
          this.tableData.data = dataTab;

          this.innerFdl = fdl;
          this.outerFdl = fdl;

          this.innerCz = cz;
          this.outerCz = cz;

          this.innerLl = ll;
          this.outerLl = ll;

          this.analyis = analyis;
        });

      // var that = this;
      // that.API.requestData({
      //   //五项损失率
      //   method: "GET",
      //   baseURL: "http://10.83.66.220:8020/",
      //   subUrl: "benchmarking/xmdb",
      //   data: {
      //     wpids: that.value1,
      //     projectids: that.value2,
      //     beginDate: that.value4,
      //     endDate: that.value5,
      //     target: "",
      //     sort: "",
      //   },
      //   success(res) {
      //     that.ajaxData = res.data;
      //     var dataTab = [], //表格
      //       fdl = [],
      //       cz = [],
      //       ll = [],
      //       analyis = [],
      //       gzssdl = [],
      //       jxssdl = [],
      //       xnssdl = [],
      //       xdssdl = [],
      //       slssdl = [];
      //     res.data.forEach((item, index) => {
      //       that.tableIdArr.push(item.id);
      //       dataTab.push({
      //         //表格
      //         index: index + 1,
      //         name: item.name,
      //         zhpm: item.zhpm,
      //         fdlpm: item.fdlpm,
      //         fdl: item.fdl,
      //         gzssdlpm: item.gzssdlpm,
      //         gzssdl: item.gzssdl,
      //         jxssdlpm: item.jxssdlpm,
      //         jxssdl: item.jxssdl,
      //         xnssdlpm: item.xnssdlpm,
      //         xnssdl: item.xnssdl,
      //         xdssdlpm: item.xdssdlpm,
      //         xdssdl: item.xdssdl,
      //         slssdlpm: item.slssdlpm,
      //         slssdl: item.slssdl,
      //         fnlylpm: item.fnlylpm,
      //         fnlyl: item.fnlyl,
      //         gzsslpm: item.gzsslpm,
      //         gzssl: item.gzssl,
      //         jxsslpm: item.jxsslpm,
      //         jxssl: item.jxssl,
      //         qflpm: item.qflpm,
      //         qfl: item.qfl,
      //         xnsslpm: item.xnsslpm,
      //         xnssl: item.xnssl,
      //         slsslpm: item.slsslpm,
      //         slssl: item.slssl,
      //         is_light: false,
      //       });

      //       fdl.push({
      //         value: item.fdl,
      //         name: item.name,
      //       });

      //       cz.push({
      //         value: (
      //           item.gzssdl +
      //           item.jxssdl +
      //           item.xnssdl +
      //           item.xdssdl +
      //           item.slssdl
      //         ).toFixed(2),
      //         name: item.name,
      //       });

      //       ll.push({
      //         value: item.llfdl,
      //         name: item.name,
      //       });

      //       gzssdl.push({
      //         text: item.name,
      //         value: item.gzssdl,
      //       });
      //       jxssdl.push({
      //         text: item.name,
      //         value: item.jxssdl,
      //       });
      //       xnssdl.push({
      //         text: item.name,
      //         value: item.xnssdl,
      //       });
      //       xdssdl.push({
      //         text: item.name,
      //         value: item.xdssdl,
      //       });
      //       slssdl.push({
      //         text: item.name,
      //         value: item.slssdl,
      //       });
      //     });
      //     analyis.push(
      //       {
      //         title: "故障损失电量",
      //         yAxisIndex: 0,
      //         value: gzssdl,
      //       },
      //       {
      //         title: "检修损失电量",
      //         yAxisIndex: 0,
      //         value: jxssdl,
      //       },
      //       {
      //         title: "性能损失电量",
      //         yAxisIndex: 0,
      //         value: xnssdl,
      //       },
      //       {
      //         title: "限电损失电量",
      //         yAxisIndex: 0,
      //         value: xdssdl,
      //       },
      //       {
      //         title: "受累损失电量",
      //         yAxisIndex: 0,
      //         value: slssdl,
      //       }
      //     );
      //     that.tableData.data = dataTab;

      //     that.innerFdl = fdl;
      //     that.outerFdl = fdl;

      //     that.innerCz = cz;
      //     that.outerCz = cz;

      //     that.innerLl = ll;
      //     that.outerLl = ll;

      //     that.analyis = analyis;
      //   },
      // });
    },
    AjaxDbfx() {
      var that = this;
      var data = that.dbData;
      that.windNum = data[0].name;
      that.windNum2 = data[1].name;
      that.tabs = [
        {
          name: "发电量",
          windData1: data[0].fdl,
          windData2: data[1].fdl,
        },
        {
          name: "故障损失电量",
          windData1: data[0].gzssdl,
          windData2: data[1].gzssdl,
        },
        {
          name: "检修损失电量",
          windData1: data[0].jxssdl,
          windData2: data[1].jxssdl,
        },
        {
          name: "性能未达标损失电量",
          windData1: data[0].xnssdl,
          windData2: data[1].xnssdl,
        },
        {
          name: "受累损失电量",
          windData1: data[0].slssdl,
          windData2: data[1].slssdl,
        },
        {
          name: "风能利用率",
          windData1: data[0].fnlyl,
          windData2: data[1].fnlyl,
        },
        {
          name: "故障损失率",
          windData1: data[0].gzssl,
          windData2: data[1].gzssl,
        },
        {
          name: "检修损失率",
          windData1: data[0].jxssl,
          windData2: data[1].jxssl,
        },
        {
          name: "弃风率",
          windData1: data[0].qfl,
          windData2: data[1].qfl,
        },
        {
          name: "性能损失率",
          windData1: data[0].xnssl,
          windData2: data[1].xnssl,
        },
        {
          name: "受累损失率",
          windData1: data[0].slssl,
          windData2: data[1].slssl,
        },
      ];

      that.radarValue = [
        {
          indicator: [
            "风能利用率",
            "故障损失率",
            "检修损失率",
            "弃风率",
            "性能损失率",
            "受累损失率",
          ],
          data: [
            {
              value: [
                data[0].fnlylpm,
                data[0].gzsslpm,
                data[0].jxsslpm,
                data[0].qflpm,
                data[0].xnsslpm,
                data[0].slsslpm,
              ],
            },
            {
              value: [
                data[1].fnlylpm,
                data[1].gzsslpm,
                data[1].jxsslpm,
                data[1].qflpm,
                data[1].xnsslpm,
                data[1].slsslpm,
              ],
            },
          ],
        },
      ];

      var analyis = [],
        gzssdl = [],
        jxssdl = [],
        xnssdl = [],
        xdssdl = [],
        slssdl = [];
      data.forEach((item, index) => {
        gzssdl.push({
          text: item.name,
          value: item.gzssdl,
        });
        jxssdl.push({
          text: item.name,
          value: item.jxssdl,
        });
        xnssdl.push({
          text: item.name,
          value: item.xnssdl,
        });
        xdssdl.push({
          text: item.name,
          value: item.xdssdl,
        });
        slssdl.push({
          text: item.name,
          value: item.slssdl,
        });
      });
      analyis.push(
        {
          title: "故障损失电量",
          yAxisIndex: 0,
          value: gzssdl,
        },
        {
          title: "检修损失电量",
          yAxisIndex: 0,
          value: jxssdl,
        },
        {
          title: "性能损失电量",
          yAxisIndex: 0,
          value: xnssdl,
        },
        {
          title: "限电损失电量",
          yAxisIndex: 0,
          value: xdssdl,
        },
        {
          title: "受累损失电量",
          yAxisIndex: 0,
          value: slssdl,
        }
      );
      that.analyisDialog = analyis;
    },
    tooltip(param, callback) {
      var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];

      var result = param[0].axisValue;
      param.forEach((value, index) => {
        result +=
          "<br />" +
          `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
          value.seriesName +
          "：" +
          value.value;
      });
      callback(result);
      return true;
    },
    dbfx() {
      var that = this;
      if (that.tableId.length == 2) {
        that.dialogVisible = true;
        this.AjaxDbfx();
        this.clearDb();
      }
    },
    clearDb() {
      //清空对标状态
      this.$refs.curRef.clearCheckBox();
      this.tableId = [];
      this.dbData = [];
      this.checkLength = 0;
    },
    back() {
      this.detailShow = 1;
      this.clearDb();
    },
    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, index) => {
        if (index > 1 && index !== that.tableData.column.length - 1) {
          tHeader.push(ele.name);
          filterVal.push(ele.field);
        }
      });

      var list = [];
      that.tableData.data.forEach((i, index) => {
        list.push(i);
      });
      const data = that.formatJson(filterVal, list);
      export_json_to_excel(tHeader, data, "项目对标"); // 最后一个是表名字
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
};
</script>

<style lang="less">
.decision-page-2 {
  .content .project-table {
    tbody {
      height: calc(100vh - 24.5vh);
    }
  }

  .project-table {
    overflow: auto;

    tbody {
      height: 440px;
    }

    th,
    td {
      color: #b2bdc0;

      &:nth-child(1) {
        width: 50px;
      }

      &:nth-child(2) {
        width: 50px;
      }
    }
  }

  .action {
    text-decoration: underline;
    color: @green;
    cursor: pointer;
  }
}
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  
  .station {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #b3b3b3;
    margin-right: 10px;
  }

  .search-input {
    margin-left: 10px;
  }

  .but {
    display: flex;
    flex-direction: row;
    align-content: center;
    margin-left: 10px;
  }

  .buttons {
    width: 80px;
    height: 25px;
    background: rgba(0, 70, 199, 0.5);
    border: 1px solid #1f51ae;
    border-radius: 13px;
    color: #ffffff;

    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;

    &:hover {
      background-color: rgba(0, 70, 199, 0.5);
      color: #ffffff;
    }
  }
}
.echarts {
  width: 100%;
  height: 26vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  // margin-top: 30px;

  .chart-name {
    display: flex;
    align-items: center;
    padding-left: 20px;
    position: relative;
    height: 39px;
    width: 100%;
    // margin-left: 1%;
    background:rgba(0, 0, 0, 0.45) ;
    border-bottom: 1px solid rgba(153, 153, 153, 0.5);
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }

  .pie-echarts {
    width: 30%;
    height: 100%;
    border: 1px solid rgba(153, 153, 153, 0.5);
    // background: rgba(0, 0, 0, 0.45);
    border-radius: 5px;
  }

  .bar-echarts {
    width: 69%;
    margin-left: 1%;
    height: 100%;
    border: 1px solid rgba(153, 153, 153, 0.5);
    // background: rgba(0, 0, 0, 0.45);
    border-radius: 5px;
  }
}
</style>