sis_zhfx/src/views/Decision/Decision2Cndb.vue

<template>
  <div class="decision-page-2">
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">场站：</div>
          <div class="search-input">
            <el-select
              v-model="value1"
              @change="ChangZhanChange(value1)"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in ChangZhan"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">开始日期：</div>
          <div class="search-input">
            <el-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">导出</button>
        <button class="btn" v-show="detailShow == 2" @click="back">返回</button>
      </div>
    </div>
    <div v-show="detailShow == 1">
      <toolbar-panel title="场内对标" :showLine="false"></toolbar-panel>
      <div class="mg-b-16">
        <div class="project-table">
          <Table
            :data="tableData"
            :canScroll="false"
            ref="curRef"
            @onSort="onSort"
          ></Table>
        </div>
      </div>
      <el-row :type="'flex'" class="content">
        <el-col :span="24" class="pd-l-8">
          <panel title="损失电量分析">
            <multiple-bar-chart
              height="30vh"
              :list="analyis"
              :customerTooltip="true"
              @tooltip="tooltip"
              :units="['(万KWh)']"
            />
          </panel>
        </el-col>
      </el-row>
    </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"
              @onSort="onSort"
            ></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";
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) {
              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: "zhpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "日期",
            field: "date",
            is_num: false,
            is_light: false,
          },
          {
            name: "发电量排名",
            field: "fdlpm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "发电量",
            field: "fdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "故障损失排名",
            field: "gzssdlpm",
            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: "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;
              that.API.requestData({
                method: "GET",
                baseURL: "http://10.155.32.4:9001/",
                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.date);

                    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,
                      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: "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: [],
      },
      options: [],
      ChangZhan: [], //场站
      XiangMu: [], //项目
      XianLu: [], //线路
      value1: [],
      value4: "",
      value5: "",
      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() {
      var that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.4:9001/",
        subUrl: "benchmarking/wplist",
        success(res) {
          that.ChangZhan = res.data;
        },
      });
    },
    ChangZhanChange(val) {
      this.value1 = 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() {
      var that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.4:9001/",
        subUrl: "benchmarking/cndb",
        data: {
          wpid: that.value1,
          beginDate: that.value4,
          endDate: that.value5,
          target: "",
          sort: "",
        },
        success(res) {
          that.ajaxData = res.data;
          var dataTab = [], //表格
            analyis = [],
            gzssdl = [],
            jxssdl = [],
            xnssdl = [],
            xdssdl = [],
            slssdl = [];
          res.data.forEach((item, index) => {
            that.tableIdArr.push(item.date);
            dataTab.push({
              //表格
              index: index + 1,
              zhpm: item.zhpm,
              date: item.date.substr(0, 10),
              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,
            });
            if (index < 7) {
              gzssdl.push({
                text: item.date.substr(0, 10),
                value: item.gzssdl,
              });
              jxssdl.push({
                text: item.date.substr(0, 10),
                value: item.jxssdl,
              });
              xnssdl.push({
                text: item.date.substr(0, 10),
                value: item.xnssdl,
              });
              xdssdl.push({
                text: item.date.substr(0, 10),
                value: item.xdssdl,
              });
              slssdl.push({
                text: item.date.substr(0, 10),
                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.analyis = analyis;
        },
      });
    },
    AjaxDbfx() {
      var that = this;
      var data = that.dbData;
      if (that.detailShow == 1) {
        that.windNum = data[0].date.substr(0, 10);
        that.windNum2 = data[1].date.substr(0, 10);
      }
      if (that.detailShow == 2) {
        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.date.substr(0, 10),
          value: item.gzssdl,
        });
        jxssdl.push({
          text: item.date.substr(0, 10),
          value: item.jxssdl,
        });
        xnssdl.push({
          text: item.date.substr(0, 10),
          value: item.xnssdl,
        });
        xdssdl.push({
          text: item.date.substr(0, 10),
          value: item.xdssdl,
        });
        slssdl.push({
          text: item.date.substr(0, 10),
          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();
    },
    onSort() {
      this.clearDb();
    },
  },
};
</script>

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

  .project-table {
    overflow: auto;

    tbody {
      height: calc(100vh - 60vh);
    }

    th,
    td {
      color: #b2bdc0;

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

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

  .action {
    text-decoration: underline;
    color: @green;
    cursor: pointer;
  }
}
</style>