SIS_Web/src/views/BorderBenchmark/InternationalBenchmark.vue

<template>
  <div class="box">
    <div class="searchBar">
      <el-form :inline="true" class="demo-form-inline" style="margin-left:1%">
        <el-row :gutter="1">
          <el-form-item label="风场">
            <el-select v-model="value" multiple placeholder="请选择">
              <el-option
                v-for="item in FClist"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="选择时间：">
            <el-date-picker
              v-model="timedate"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="queryApData" :plain="true"
              >查询</el-button
            >
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="queryApDataMx"
              >对标分析</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
      <el-table
        :data="gridData"
        :row-style="{ height: '10px' }"
        :cell-style="{ textAlign: 'center'}"
        :header-cell-style="headStyle"
        @selection-change="handleSelectionChange"
        @sort-change="changeTableSort"
      >
        
          <el-table-column type="index" width="50"> </el-table-column>
          <el-table-column
            type="selection"
            class="selection"
            @selection-change="changeFun"
            width="50"
          >
          </el-table-column>
          <el-table-column sortable prop="wpName" label="风电场名称" width="130">
          </el-table-column>
          <el-table-column sortable prop="ordernum" label="综合排名" width="130">
          </el-table-column>
         
          <el-table-column
            sortable
            prop="scadafdlnum"
            label="发电量排名"
            width="130"
          >
          </el-table-column>
          <el-table-column sortable prop="fdl" :formatter="simplification" label="发电量" width="110">
          </el-table-column>
          <el-table-column
            sortable
            prop="gzssnum"
            label="故障损失排名"
            width="130"
          >
          </el-table-column>
          <el-table-column sortable prop="gzss" label="故障损失电量" width="130">
          </el-table-column>
          <el-table-column
            sortable
            prop="whssnum"
            label="检修损失排名"
            width="130"
          >
          </el-table-column>
          <el-table-column sortable prop="whss" label="检修损失电量" width="130">
          </el-table-column>
          <el-table-column
            sortable
            prop="qfssnum"
            label="性能损失排名"
            width="130"
          >
          </el-table-column>
          <el-table-column sortable prop="qfss" label="性能损失电量" width="130">
          </el-table-column>
          <el-table-column
            sortable
            prop="xdssnum"
            label="限电损失排名"
            width="130"
          >
          </el-table-column>
          <el-table-column sortable prop="xdss" label="限电损失电量" width="130">
          </el-table-column>
          <el-table-column
            sortable
            prop="slssnum"
            label="受累损失排名"
            width="130"
          >
          </el-table-column>
          <el-table-column sortable prop="slss" label="受累损失电量" width="130">
          </el-table-column>
          <el-table-column
            sortable
            prop="fnlylnum"
            label="风能利用率排名"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="fnlyl"
            label="风能利用率(%)"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="gzsslnum"
            label="故障损失率排名"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="gzssl"
            label="故障损失率(%)"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="jxsslnum"
            label="检修损失率排名"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="jxssl"
            label="检修损失率(%)"
            width="150"
          >
          </el-table-column>
          <el-table-column sortable prop="qflnum" label="弃风率排名" width="130">
          </el-table-column>
          <el-table-column sortable prop="qfl" label="弃风率(%)" width="130">
          </el-table-column>
          <el-table-column
            sortable
            prop="xnsslnum"
            label="性能损失率排名"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="xnssl"
            label="性能损失率(%)"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="slsslnum"
            label="受累损失率排名"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="slssl"
            label="受累损失率(%)"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="fwjslnum"
            label="复位及时率排名"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="fwjsl"
            label="复位及时率(%)"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="ztzhjslnum"
            label="状态转换率排名"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="ztzhjsl"
            label="状态转换率(%)"
            width="150"
          >
          </el-table-column>
          <el-table-column fixed="right" prop="address" label="操作" width="70">
            <template slot-scope="scope">
              <el-button
                size="medium"
                type="text"
                @click="handleEdit(scope.$index, scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
      </el-table>

      <el-dialog
        class="el-dialog_body"
        width="60%"
        title="对标信息分析"
        :visible.sync="dialogTableVisible"
        append-to-body
      >
        <div class="margin">
          <div class="dialogLeftData">
            <div id="leiDaTu" class="echart"></div>
            <div id="leiDaTu2" class="echart"></div>
          </div>
          <div class="dialogRightData">
            <el-table
              :data="getTableData"
              height="618"
              :row-style="{ height: '10px' }"
              border
              :header-cell-style="headStyle"
              :cell-style="{ textAlign: 'center', padding: '7px' }"
              style="width: 100%; font-size: 10px"
            >
              <el-table-column prop="index" label="指标"> </el-table-column>
              <el-table-column prop="data1" :label="fdcName1">
              </el-table-column>
              <el-table-column prop="data2" :label="fdcName2">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-dialog>
      <!-- <div style="text-align: center;">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage2"
					 :page-sizes="[10, 50, 100, 1000]"
					 :page-size="pagesize" layout="sizes, prev, pager, next" :total="1000">
					</el-pagination>
				</div> -->

      <el-row>
        <el-col :span="12"
          ><div
            id="chartPie"
            style="width: 800px; height: 400px; margin-top: 33px;margin-left:99px"
          ></div>
        </el-col>
        <el-col :span="12">
          <div
            id="chartPieRight"
            style="width: 800px; height: 400px;  margin-top: 33px;margin-left:99px"
          ></div
        ></el-col>
      </el-row>

      <el-row>
        <div class="box">
          <div
            id="chartHistogram"
            style="width: 90%; height: 300px; margin: auto"
          ></div>
        </div>
      </el-row>
    </div>
  </div>
</template>
<script>
import FiveLossRatesHistogramChart from "../../views/benchMarking/FiveLossRatesHistogramChart.vue";
import formateDate from "@/utils/date";
import formateDate1 from "@/utils/date_1";
import * as echarts from "echarts";
export default {
  data() {
    return {
      timedate: [],
      isAsc: "asc",
      beginDate: "",
      endDate: "",
      gridData: [],
      multipleSelection: [],
      sortInOrder: [],
      sortInOrderTop: [],
      sortInOrde2: [],
      getTableData: [],
      sortInOrderTop2: [],
      fdcName1: "",
      fdcName2: "",
      currentPage2: 1,
      pagesize: 10,
      FClist: {
        name: "",
        id: "",
      },
      value: "",
      wpId: [],
      wpName: [],
      orderByColumn: "",
      dialogTableVisible: false,
      lineDataOption: [],
      getChartDataValue: [],
      getChartDataValue2: [],
      getChartData:[]
    };
  },
  components: {
  },
  created() {
    this.Inquire_tableDate();
  },
  methods: {
    changeFun(val) {
      this.selectrowdate = val;
    },
    filter_date(cellValue) {
      let date = new Date(cellValue.recordDate);

      return formateDate(date / 1000);
    },
    headStyle() {
      return "text-align:center";
    },
    onSubmit() {
    },
    handleClick() {},
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    queryApData() {
      this.Inquire_tableDate();
    },
    simplification(cellValue){
      return parseFloat(cellValue.fdl).toFixed(2);
    },
    handleEdit(a, b) {
      this.wpId = [];
      this.lineDataOption = [];
      if (this.multipleSelection.length == 2) {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          this.wpId.push(this.multipleSelection[i].wpId);
          this.wpName.push(this.multipleSelection[i].wpName);
          this.lineDataOption.push({
            id: this.multipleSelection[i].wpId,
            name: this.multipleSelection[i].wpName,
          });
        }
        this.$router.push({
          path: "/NationBenchmark_particulars",
          query: {
            wpId: this.wpId,
            beginDate: this.beginDate,
            endDate: this.endDate,
            wpName: this.wpName,
            select: this.lineDataOption,
          },
        });
      } else {
        this.lineDataOption.push({ id: b.wpId, name: b.wpName });
        this.$router.push({
          path: "/NationBenchmark_particulars",
          query: {
            wpId: b.wpId,
            beginDate: this.beginDate,
            endDate: this.endDate,
            wpName: b.wpName,
            select: this.lineDataOption,
          },
        });
      }
    },
    queryApDataMx() {
      this.dialogTableVisible = true;
      this.$nextTick(function () {
        this.drawPie("leiDaTu");
      });
      this.$nextTick(function () {
        this.drawPie2("leiDaTu2");
      });
    },
    handleSelectionChange(val) {
      this.sortInOrder = [];
      this.sortInOrderTop = [];
      this.getTableData = [];
      this.sortInOrde2 = [];
      this.multipleSelection = val;
      if (this.multipleSelection.length == 2) {
        this.fdcName1 = this.multipleSelection[0].wpName;
        this.fdcName2 = this.multipleSelection[1].wpName;
        this.sortInOrder.push(
          this.multipleSelection[0].fnlyl,
          this.multipleSelection[0].xqjsl,
          this.multipleSelection[0].ztzhjsl,
          this.multipleSelection[0].fwjsl,
          this.multipleSelection[0].slssl,
          this.multipleSelection[0].xnssl,
          this.multipleSelection[0].qfl,
          this.multipleSelection[0].jxssl,
          this.multipleSelection[0].gzssl
        );
        this.sortInOrderTop.push(
          this.multipleSelection[1].fnlyl,
          this.multipleSelection[1].xqjsl,
          this.multipleSelection[1].ztzhjsl,
          this.multipleSelection[1].fwjsl,
          this.multipleSelection[1].slssl,
          this.multipleSelection[1].xnssl,
          this.multipleSelection[1].qfl,
          this.multipleSelection[1].jxssl,
          this.multipleSelection[1].gzssl
        );
        for (let i = 0; i < this.multipleSelection.length; i++) {
          this.sortInOrde2.push({
            product: this.multipleSelection[i].wpName,
            "限电损失电量单位:万KWh": this.multipleSelection[i].xdss,
            "故障损失电量单位:万KWh": this.multipleSelection[i].gzss,
            "检修损失电量单位:万KWh": this.multipleSelection[i].jxssl,
            "性能损失电量单位:万KWh": this.multipleSelection[i].xnssl,
            "受累损失电量单位:万KWh": this.multipleSelection[i].slss,
          });
        }
        this.getTableData.push({
          index: "发电量",
          data1: this.multipleSelection[0].fdl,
          data2: this.multipleSelection[1].fdl,
        });
        this.getTableData.push({
          index: "故障损失电量",
          data1: this.multipleSelection[0].gzss,
          data2: this.multipleSelection[1].gzss,
        });
        this.getTableData.push({
          index: "检修损失电量",
          data1: this.multipleSelection[0].jxssl,
          data2: this.multipleSelection[1].jxssl,
        });
        this.getTableData.push({
          index: "性能未达标损失电量",
          data1: this.multipleSelection[0].xnsslfraction,
          data2: this.multipleSelection[1].xnsslfraction,
        });
        this.getTableData.push({
          index: "受累损失电量",
          data1: this.multipleSelection[0].slss,
          data2: this.multipleSelection[1].slss,
        });
        this.getTableData.push({
          index: "风能利用率",
          data1: this.multipleSelection[0].fnlyl,
          data2: this.multipleSelection[1].fnlyl,
        });
        this.getTableData.push({
          index: "故障损失率",
          data1: this.multipleSelection[0].gzssl,
          data2: this.multipleSelection[1].gzssl,
        });
        this.getTableData.push({
          index: "检修损失率",
          data1: this.multipleSelection[0].jxssl,
          data2: this.multipleSelection[1].jxssl,
        });
        this.getTableData.push({
          index: "弃风率",
          data1: this.multipleSelection[0].qfl,
          data2: this.multipleSelection[1].qfl,
        });
        this.getTableData.push({
          index: "性能损失率",
          data1: this.multipleSelection[0].xnssl,
          data2: this.multipleSelection[1].xnssl,
        });
        this.getTableData.push({
          index: "受累损失率",
          data1: this.multipleSelection[0].slssl,
          data2: this.multipleSelection[1].slssl,
        });
        this.getTableData.push({
          index: "复位及时率",
          data1: this.multipleSelection[0].fwjsl,
          data2: this.multipleSelection[1].fwjsl,
        });
        this.getTableData.push({
          index: "消缺及时率",
          data1: this.multipleSelection[0].xqjsl,
          data2: this.multipleSelection[1].xqjsl,
        });
        this.getTableData.push({
          index: "状态转换率",
          data1: this.multipleSelection[0].ztzhjsl,
          data2: this.multipleSelection[1].ztzhjsl,
        });
      }
    },
    handleCurrentChange(val) {
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    changeTableSort(column) {
      this.orderByColumn = column.prop;
      if (column.order == "descending") {
        this.isAsc = "desc";
      } else if (column.order == "ascending") {
        this.isAsc = "asc";
      }
      this.Inquire_tableDate();
    },
    Inquire_tableDate() {
      var newData = new Date();
       this.timedate[0] = formateDate1((newData.getTime()-86400000)/1000);
       this.timedate[1] = formateDate1(newData.getTime()/1000);
      let that = this;
      this.$http.get("/powercompare/windfarmAjax").then((res) => {
        that.FClist = res.data.data;
      });
      if (this.timedate == "") {
        this.timedate[0] = "2021-01-01";
        this.timedate[1] = "2021-01-01";
        this.beginDate = this.timedate[0];
        this.endDate = this.timedate[1];
      } else {
        this.beginDate = this.timedate[0];
        this.endDate = this.timedate[1];
      }
      var fiveLossData = new URLSearchParams();
      fiveLossData.append("pageNum", this.currentPage2);
      fiveLossData.append("pageSize", this.pagesize);
      fiveLossData.append("orderByColumn", this.orderByColumn);
      fiveLossData.append("isAsc", this.isAsc);
      fiveLossData.append("wpId", this.value);
      fiveLossData.append("beginDate", this.beginDate);
      fiveLossData.append("endDate", this.endDate);
      this.$http
        .post("/contrast/benchmarkWpOutList", fiveLossData)
        .then((res) => {
          that.gridData = res.data.data;
          that.getPackageData(that.gridData);
          that.getPackageData2(that.gridData);
        });
    },
    drawPie() {
      var charts;
      if (charts != null && charts != "" && charts != undefined) {
        charts.dispose();
      }
      charts = this.$echarts.init(document.getElementById("leiDaTu"));
      let option = {
        title: {
          // text: '对标排名分析',
          left: "center",
        },
        tooltip: {},
        // legend: {
        //     data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
        //     left: 'right'
        // },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5],
            },
          },
          indicator: [
            { name: "风能利用率", max: 150 },
            { name: "消缺及时率", max: 150 },
            { name: "状态转换率", max: 150 },
            { name: "复位及时率", max: 150 },
            { name: "受累损失率", max: 150 },
            { name: "性能损失率", max: 150 },
            { name: "弃风率", max: 150 },
            { name: "检修损失率", max: 150 },
            { name: "故障损失率", max: 150 },
          ],
        },
        series: [
          {
            name: "预算 vs 开销（Budget vs spending）",
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: this.sortInOrder,
                name: this.fdcName1,
              },
              {
                value: this.sortInOrderTop,
                name: this.fdcName2,
              },
            ],
          },
        ],
      };
      charts.clear();
      charts.setOption(option);
    },
    drawPie2() {
      var charts2;
      if (charts2 != null && charts2 != "" && charts2 != undefined) {
        charts2.dispose();
      }
      charts2 = this.$echarts.init(document.getElementById("leiDaTu2"));
      let option2 = {
        legend: {
          orient: "vertical",
          left: "right",
        },
        tooltip: {},
        dataset: {
          dimensions: [
            "product",
            "限电损失电量单位:万KWh",
            "故障损失电量单位:万KWh",
            "检修损失电量单位:万KWh",
            "性能损失电量单位:万KWh",
            "受累损失电量单位:万KWh",
          ],
          source: this.sortInOrde2,
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            // barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
            type: "bar",
            barWidth: 30,
            itemStyle: {
              normal: {
                color: "#D201D8",
              },
            },
          },
          {
            type: "bar",
            barWidth: 30,
            itemStyle: {
              normal: {
                color: "#FD0100",
              },
            },
          },
          {
            type: "bar",
            barWidth: 30,
            itemStyle: {
              normal: {
                color: "#FF7B16",
              },
            },
          },
          {
            type: "bar",
            barWidth: 30,
            itemStyle: {
              normal: {
                color: "#8085E9",
              },
            },
          },
          {
            type: "bar",
            barWidth: 30,
            itemStyle: {
              normal: {
                color: "#A6A6A6",
              },
            },
          },
        ],
      };
      charts2.clear();
      charts2.setOption(option2);
    },
    toExcel() {},
    getPackageData(gridData) {
      for (let i = 0; i < gridData.length; i++) {
        this.getChartDataValue.push({
          value: gridData[i].fdl,
          name: gridData[i].wpName,
        });
        this.getChartDataValue2.push({
          value: gridData[i].gzss,
          name: gridData[i].wpName,
        });
      }
      this.getChartDataImport();
      this.getChartDataValue = [];
      this.getChartDataValue2 = [];
    },
    getChartDataImport() {
      var charts = echarts.init(document.getElementById("chartPie"));
      let option = {
        title: {
          text: "发电量占比",
          left: "center",
        },
        color: ["#90ED7D", "#F7A35C", "#7CB5EC", "#434348", "#8085E9"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: this.getChartDataValue,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      charts.setOption(option);

      var charts2 = echarts.init(document.getElementById("chartPieRight"));
      let option2 = {
        title: {
          text: "损失电量占比",
          left: "center",
        },
        color: ["#90ED7D", "#F7A35C", "#7CB5EC", "#434348", "#8085E9"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: this.getChartDataValue2,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      charts2.setOption(option2);
    },
    getPackageData2(gridData){
            this.getChartData = [];
            for(let i=0;i<gridData.length;i++){
                this.getChartData.push({product:gridData[i].wpName,'限电损失电量单位:万KWh':gridData[i].xdss,
                '故障损失电量单位:万KWh':gridData[i].gzss,'检修损失电量单位:万KWh':gridData[i].jxssl,
                '性能损失电量单位:万KWh':gridData[i].xnssl,'受累损失电量单位:万KWh':gridData[i].slss})
            }
            this.getChartDataImport2();
        },
        getChartDataImport2(){
            var charts =echarts.init(document.getElementById("chartHistogram"));
            let option = {
            title: {
                text: '损失电量分析',
                left: 'center'
            },
            legend: {
                orient: 'vertical',
                left: 'right'
            },
            tooltip: {},
            dataset: {
                 dimensions: ['product', '限电损失电量单位:万KWh', '故障损失电量单位:万KWh', '检修损失电量单位:万KWh', '性能损失电量单位:万KWh', '受累损失电量单位:万KWh'],
                 source: this.getChartData
            },
            xAxis: {type: 'category'},
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                {
                    // barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
                    type: 'bar',
                    barWidth : 30,
                    itemStyle:{
                        normal:{
                            color:'#D201D8'
                        }
                    }
                },
                {
                    
                    type: 'bar',
                    barWidth : 30,
                    itemStyle:{
                        normal:{
                            color:'#FD0100'
                        }
                    }
                },
                {
                    
                    type: 'bar',
                    barWidth : 30,
                    itemStyle:{
                        normal:{
                            color:'#FF7B16'
                        }
                    }
                },
                {
                    
                    type: 'bar',
                    barWidth : 30,
                    itemStyle:{
                        normal:{
                            color:'#8085E9'
                        }
                    }
                },
                {
                    
                    type: 'bar',
                    barWidth : 30,
                    itemStyle:{
                        normal:{
                            color:'#A6A6A6'
                        }
                    }
                },
                
            ]
        };
        charts.setOption(option);
        }
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}
.searchBar {
  margin-top: 1%;
}
.pieChart {
  margin-top: 2%;
}
.histogramChart {
  margin-bottom: 10%;
}
#leiDaTu {
  margin-left: 5%;
  height: 300px;
  width: 100%;
  float: left;
}
#leiDaTu2 {
  margin: 15%;
  height: 300px;
  width: 450px;
  float: left;
}
.margin {
  width: 100%;
  height: 618px;
}
.dialogLeftData {
  width: 50%;
  height: 650px;
  text-align: center;
  float: left;
}
  /deep/::-webkit-scrollbar {
    z-index: 99999999;
    width: 6px;
    height: 13px !important;
    background-color: #f5f5f5;
}
.dialogRightData {
  width: 50%;
  height: 650px;
  text-align: center;
  float: left;
}
</style>