hb_sis_zhfx/src/views/Decision/Decision3.vue

<template>
  <div class="decision-page-3">
    <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)"
              multiple
              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)"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="(item, index) in XiangMu"
                :key="item.id"
                :value="index"
                :label="item.name"
              >
              </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 green">搜索</button>
        <button class="btn" @click="dbfx">对标分析</button>
        <button class="btn" v-show="detailShow == 2" @click="back">返回</button>
      </div>
    </div>
    <toolbar-panel title="性能对标" :showLine="false"></toolbar-panel>
    <!-- 列表 -->
    <div v-show="detailShow == 1">
      <div class="project-table">
        <Table :data="tableData" ref="curRef"></Table>
      </div>
      <!-- 风资源列表 -->
      <!-- <div class="direction-info mg-b-16">
				<table class="com-table">
					<tbody>
						<tr>
							<td v-for="(col, i) of tableData.column" :key="i">
								<div v-if="i == 0">22</div>
								<div v-if="i == 1">风资源</div>
								<div v-if="i != 0 && i != 1">
									<div class="direction-title">3.123</div>
									<div class="direction-chart">
										<DirectionRadarChart :width="'70%'" :height="'232px'" :value="90" />
										<div class="legend mg-t-16">
											<span class="dot"></span>
											<span>静风频率为2</span>
										</div>
									</div>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</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="
              XiangMu[value2].name.substr(0, XiangMu[value2].name.length - 1) +
              '占比'
            "
          >
            <dual-pie-chart
              height="21.296vh"
              :innerData="innerCz"
              :outerData="outerCz"
            />
          </panel>
        </el-col>
      </el-row>
      <panel title="损失电量分析">
        <multiple-bar-chart
          :height="'calc(100vh - 21.3vh - 430px)'"
          :list="analyis"
          :customerTooltip="true"
          @tooltip="tooltip"
          :units="['(万KWh)']"
        />
      </panel>
    </div>
    <el-row :type="'flex'" class="content" v-show="detailShow == 2">
      <el-col :span="24" class="pd-l-8">
        <panel :title="'风机对标列表明细'" :showLine="false">
          <div class="project-table">
            <Table :data="tableDataDetail" ref="curRef" height="70vh"></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 "../../components/chart/pie/dual-pie-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import Panel from "../../components/coms/panel/panel.vue";
import Table from "./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,
    Dayinfo,
    ToolbarPanel,
  },
  data() {
    let that = this;
    return {
      tableIdArr: [], //放checkbox的id数组
      tableId: [],
      checkLength: 0, //对标分析只能选择2个
      tableData: {
        column: that.column1,
        data: [],
      },
      tableDataDetail: {
        column: [
          {
            name: "",
            field: "index",
            is_num: false,
            is_light: false,
          },
          {
            name: "",
            field: "fdl",
            is_num: false,
            is_light: false,
            display: "none",
          },
          {
            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: [],
      },
      ChangZhan: [], //场站
      XiangMu: [
        {
          //项目
          name: "弃风率",
          id: 1,
        },
        {
          name: "故障损失率",
          id: 2,
        },
        {
          name: "检修损失率",
          id: 3,
        },
        {
          name: "性能损失率",
          id: 4,
        },
        {
          name: "受累损失率",
          id: 5,
        },
      ],
      value1: [],
      value2: 0,
      value3: [],
      value4: "",
      value5: "",
      innerFdl: [], //发电量占比
      outerFdl: [],
      innerCz: [], //各场站损失电量占比
      outerCz: [],
      analyis: [], //损失电量分析
      dialogVisible: false,
      radarValue: [],
      windNum: "dd",
      windNum2: "dd",
      tabs: [],
      analyisDialog: [],
      detailShow: 1,
      ajaxData: [],
      column1: [
        {
          //弃风率
          name: "",
          field: "index",
          is_num: false,
          is_light: false,
        },
        {
          name: "",
          field: "check",
          is_num: false,
          is_light: false,
          template: () => {
            return "<input class='check curCheckBox checkItem' type='CheckBox' />";
          },
          click: function (event, data) {
            that.checkClick(event, data);
          },
        },
        {
          name: "名称",
          field: "name",
          is_num: false,
          is_light: false,
        },
        {
          name: "限电损失排名",
          field: "xdssdlpm",
          is_num: false,
          is_light: false,
          sortable: true,
        },
        {
          name: "限电损失",
          field: "xdssdl",
          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: "cz",
          is_num: false,
          is_light: false,
          template: function () {
            return "<a class='action'>详情</a>";
          },
          click: function (event, data) {
            that.detailClick(data);
          },
        },
      ],
      column2: [
        {
          //故障损失率
          name: "",
          field: "index",
          is_num: false,
          is_light: false,
        },
        {
          name: "",
          field: "check",
          is_num: false,
          is_light: false,
          template: () => {
            return "<input class='check curCheckBox checkItem' type='CheckBox' />";
          },
          click: function (event, data) {
            that.checkClick(event, data);
          },
        },
        {
          name: "名称",
          field: "name",
          is_num: false,
          is_light: false,
        },
        {
          name: "故障损失排名",
          field: "gzssdlpm",
          is_num: false,
          is_light: false,
          sortable: true,
        },
        {
          name: "故障损失",
          field: "gzssdl",
          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: "cz",
          is_num: false,
          is_light: false,
          template: function () {
            return "<a class='action'>详情</a>";
          },
          click: function (event, data) {
            that.detailClick(data);
          },
        },
      ],
      column3: [
        {
          //检修损失率
          name: "",
          field: "index",
          is_num: false,
          is_light: false,
        },
        {
          name: "",
          field: "check",
          is_num: false,
          is_light: false,
          template: () => {
            return "<input class='check curCheckBox checkItem' type='CheckBox' />";
          },
          click: function (event, data) {
            that.checkClick(event, data);
          },
        },
        {
          name: "名称",
          field: "name",
          is_num: false,
          is_light: false,
        },

        {
          name: "检修损失排名",
          field: "jxssdlpm",
          is_num: false,
          is_light: false,
          sortable: true,
        },
        {
          name: "检修损失",
          field: "jxssdl",
          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: "cz",
          is_num: false,
          is_light: false,
          template: function () {
            return "<a class='action'>详情</a>";
          },
          click: function (event, data) {
            that.detailClick(data);
          },
        },
      ],
      column4: [
        {
          //性能损失率
          name: "",
          field: "index",
          is_num: false,
          is_light: false,
        },
        {
          name: "",
          field: "check",
          is_num: false,
          is_light: false,
          template: () => {
            return "<input class='check curCheckBox checkItem' type='CheckBox' />";
          },
          click: function (event, data) {
            that.checkClick(event, data);
          },
        },
        {
          name: "名称",
          field: "name",
          is_num: false,
          is_light: false,
        },
        {
          name: "性能损失排名",
          field: "xnssdlpm",
          is_num: false,
          is_light: false,
          sortable: true,
        },
        {
          name: "性能损失",
          field: "xnssdl",
          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: "cz",
          is_num: false,
          is_light: false,
          template: function () {
            return "<a class='action'>详情</a>";
          },
          click: function (event, data) {
            that.detailClick(data);
          },
        },
      ],
      column5: [
        {
          //受累损失率
          name: "",
          field: "index",
          is_num: false,
          is_light: false,
        },
        {
          name: "",
          field: "check",
          is_num: false,
          is_light: false,
          template: () => {
            return "<input class='check curCheckBox checkItem' type='CheckBox' />";
          },
          click: function (event, data) {
            that.checkClick(event, data);
          },
        },
        {
          name: "名称",
          field: "name",
          is_num: false,
          is_light: false,
        },
        {
          name: "受累损失排名",
          field: "slssdlpm",
          is_num: false,
          is_light: false,
          sortable: true,
        },
        {
          name: "受累损失",
          field: "slssdl",
          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) {
            that.detailClick(data);
          },
        },
      ],
      dbData: [],
    };
  },
  created() {
    this.ChangZhanVal();
    this.value4 = this.getTime(1);
    this.value5 = this.getTime(2);
    this.AjaxCommon();
  },
  methods: {
    ChangZhanVal() {

      api.benchmarkingWplist2({
         projects: val,
      }).then((res) => {
        this.ChangZhan = res.data;
      });

      // var that = this;
      // that.API.requestData({
      //   method: "GET",
      //   baseURL: "http://10.83.66.220:8020/",
      //   subUrl: "benchmarking/wplist",
      //   success(res) {
      //     that.ChangZhan = res.data;
      //   },
      // });
    },
    ChangZhanChange(val) {
      this.value1 = val;
      this.AjaxCommon();
      this.clearDb();
    },
    XiangMuChange(val) {
      this.tableType(this.value2);
      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.benchmarkingWxssl({
         wpids: this.value1,
          projectids: [],
          lineids: [],
          beginDate: this.value4,
          endDate: this.value5,
          target: "",
          sort: "",
      }).then((res) => {
             this.ajaxData = res.data;
          var analyis = [],
            gzssdl = [],
            jxssdl = [],
            xnssdl = [],
            xdssdl = [],
            slssdl = [];

          this.ajaxData.forEach((item, index) => {
            this.tableIdArr.push(item.id);
            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.tableType(this.value2);
          this.analyis = analyis;
      });


      // var that = this;
      // that.API.requestData({
      //   //五项损失率
      //   method: "GET",
      //   baseURL: "http://10.83.66.220:8020/",
      //   subUrl: "benchmarking/wxssl",
      //   data: {
      //     wpids: that.value1,
      //     projectids: [],
      //     lineids: [],
      //     beginDate: that.value4,
      //     endDate: that.value5,
      //     target: "",
      //     sort: "",
      //   },
      //   success(res) {
      //     that.ajaxData = res.data;
      //     var analyis = [],
      //       gzssdl = [],
      //       jxssdl = [],
      //       xnssdl = [],
      //       xdssdl = [],
      //       slssdl = [];

      //     that.ajaxData.forEach((item, index) => {
      //       that.tableIdArr.push(item.id);
      //       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.tableType(that.value2);
      //     that.analyis = analyis;
      //   },
      // });
    },
    AjaxDbfx() {
      var that = this;
      var data = that.dbData;
      that.windNum = data[0].name;
      that.windNum2 = data[1].name;
      console.log(data[0], data[1]);
      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();
    },
    detailClick(data) {
      var that = this;
      var dataId = that.tableIdArr[data.index - 1];
      that.clearDb();
      that.detailShow = 2;

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

            dataTab.push({
              //表格
              index: index + 1,
              fdl: item.fdl,
              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,
            });
          });
          this.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,
      //         fdl: item.fdl,
      //         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;
      //   },
      // });
    },
    checkClick(event, data) {
      var that = this;
      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;
      }
    },
    tableType(a) {
      var that = this;
      var dataTab = [],
        fdl = [],
        cz = [];
      that.ajaxData.forEach((item, index) => {
        fdl.push({
          value: item.fdl,
          name: item.name,
        });

        if (a == 0) {
          dataTab.push({
            //弃风率
            index: index + 1,
            name: item.name,
            xdssdlpm: item.xdssdlpm,
            xdssdl: item.xdssdl,
            qflpm: item.qflpm,
            qfl: item.qfl,
            is_light: false,
          });
          cz.push({
            value: item.xdssdl,
            name: item.name,
          });
        }
        if (a == 1) {
          dataTab.push({
            //故障损失率
            index: index + 1,
            name: item.name,
            gzssdlpm: item.gzssdlpm,
            gzssdl: item.gzssdl,
            gzsslpm: item.gzsslpm,
            gzssl: item.gzssl,
            is_light: false,
          });
          cz.push({
            value: item.gzssdl,
            name: item.name,
          });
        }
        if (a == 2) {
          dataTab.push({
            //检修损失率
            index: index + 1,
            name: item.name,
            jxssdlpm: item.jxssdlpm,
            jxssdl: item.jxssdl,
            jxsslpm: item.jxsslpm,
            jxssl: item.jxssl,
            is_light: false,
          });
          cz.push({
            value: item.jxssdl,
            name: item.name,
          });
        }
        if (a == 3) {
          dataTab.push({
            //性能损失率
            index: index + 1,
            name: item.name,
            xnssdlpm: item.xnssdlpm,
            xnssdl: item.xnssdl,
            xnsslpm: item.xnsslpm,
            xnssl: item.xnssl,
            is_light: false,
          });
          cz.push({
            value: item.xnssdl,
            name: item.name,
          });
        }
        if (a == 4) {
          dataTab.push({
            //受累损失率
            index: index + 1,
            name: item.name,
            slssdlpm: item.slssdlpm,
            slssdl: item.slssdl,
            slsslpm: item.slsslpm,
            slssl: item.slssl,
            is_light: false,
          });
          cz.push({
            value: item.slssdl,
            name: item.name,
          });
        }
      });

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

      that.innerCz = cz;
      that.outerCz = cz;
      that.tableData.data = dataTab;
      if (a == 0) {
        that.tableData.column = that.column1;
      }
      if (a == 1) {
        that.tableData.column = that.column2;
      }
      if (a == 2) {
        that.tableData.column = that.column3;
      }
      if (a == 3) {
        that.tableData.column = that.column4;
      }
      if (a == 4) {
        that.tableData.column = that.column5;
      }
    },
  },
};
</script>

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

  .info {
    overflow: auto;
    height: calc(100vh - 150px);
  }

  .project-table {
    overflow: auto;

    .com-table {
      tbody {
        height: 145px;
        padding-right: 0px;
      }

      th,
      td {
        color: #b2bdc0;

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

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

  .direction-info {
    .com-table {
      tbody {
        padding-right: 0px;
      }

      th,
      td {
        color: #b2bdc0;
        padding: 0;

        &:nth-child(1) {
          width: 32px;
          background-color: fade(#536268, 20);
        }

        &:nth-child(2) {
          width: 183px;
          background-color: fade(#536268, 40);
        }

        .direction-title {
          background-color: fade(#536268, 20);
          font-size: @fontsize-s;
          line-height: 2.963vh;
        }

        .direction-chart {
          padding-top: 48px;

          .legend {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 32px;
            margin-bottom: 16px;

            .dot {
              width: 7px;
              height: 7px;
              background: @green;
              display: inline-block;
              margin-right: 8px;
            }
          }
        }
      }
    }
  }
  .action {
    text-decoration: underline;
    color: @green;
    cursor: pointer;
  }
}
</style>